Badge
Ripple UI comes with a set of predefined badges that can be used to highlight important information.
Default
Simple example of a badge.
DefaultHTML
JSX
<span class="badge">Default</span>
Square
Badge with square shape.
DefaultHTML
JSX
<span class="badge badge-square">Default</span>
Colors
Badge with different colors.
Primary Secondary Success Danger WarningHTML
JSX
<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span><span class="badge badge-error">Danger</span><span class="badge badge-warning">Warning</span>
Flat
Flat variant.
Primary Secondary Success Danger WarningHTML
JSX
<span class="badge badge-flat-primary">Primary</span><span class="badge badge-flat-secondary">Secondary</span><span class="badge badge-flat-success">Success</span><span class="badge badge-flat-error">Danger</span><span class="badge badge-flat-warning">Warning</span>
Outline
Badge with outline.
Default Default Default Default DefaultHTML
JSX
<span class="badge badge-outline-primary">Default</span><span class="badge badge-outline-secondary">Default</span><span class="badge badge-outline-success">Default</span><span class="badge badge-outline-warning">Default</span><span class="badge badge-outline-error">Default</span>
Sizes
Badge with different sizes.
Default Default Default Default DefaultHTML
JSX
<span class="badge badge-xs">Default</span><span class="badge badge-sm">Default</span><span class="badge badge-md">Default</span><span class="badge badge-lg">Default</span><span class="badge badge-xl">Default</span>
API
| class | Description |
|---|---|
| badge | Badge base class |
| badge-square | Set square shape |
| badge-primary | Set secondary color |
| badge-secondary | Set secondary color |
| badge-success | Set success color |
| badge-error | Set error color |
| badge-warning | Set warning color |
| badge-outline-primary | Set transparent background with border primary |
| badge-outline-secondary | Set transparent background with border secondary |
| badge-outline-success | Set transparent background with border success |
| badge-outline-error | Set transparent background with border error |
| badge-outline-warning | Set transparent background with border warning |
| badge-flat-primary | Set low blue background and strong blue text color |
| badge-flat-secondary | Set low purple background and strong purple text color |
| badge-flat-success | Set low green background and strong green text color |
| badge-flat-warning | Set low yellow background and strong yellow text color |
| badge-flat-error | Set low red background and strong red text color |
| badge-xs | Set extra small size |
| badge-sm | Set small size |
| badge-md | Set medium size |
| badge-lg | Set large size |
| badge-xl | Set extra large size |