Badge
A badge is a short label inside a line: a status, a version, a category. Choose it for one or two words that the reader must notice at once.
Example
The component is ready to use New
Markup
Markdown
:badge[Label text]{scheme=success}
- The square brackets hold the label text, the curly braces the parameters. All parameters are optional.
- A badge sits inside a line: in a paragraph, a list item, a table cell or a heading.
The badge is built on the SIMAI Framework badge (sf-badge).
Variants
Look
variant sets how strongly the badge stands out.
Filled Soft background Outline
Colour
scheme picks a colour from the SIMAI Framework palette: the primary colour,
the additional ones, neutral or a status colour.
Primary Secondary Tertiary Neutral Info Success Warning Error On surface
Size
size picks a step from the SIMAI Framework scale. By default the badge is
small so that it does not stand out of the line of text.
1/3 1/2 1
Accessibility
- A badge is plain text: screen readers read it together with the line. Write the label so that it is clear without the colour.
- Colour adds to the meaning but does not replace it: “Error” on a red background, not just a red dot.
- A badge is not clickable. For navigation use a button link.
Parameters
| Parameter | Values | Default | Sets |
|---|---|---|---|
variant |
main, tonal, outline |
tonal |
The look: main is filled with the main colour, tonal has a soft background, outline has only a border. The old name type is accepted with a warning. |
scheme |
primary, secondary, tertiary, neutral, info, success, warning, danger, on-surface |
primary |
A colour from the SIMAI Framework palette: primary, additional, neutral or a status colour. |
size |
1/3, 1/2, 1 |
1/3 |
The size step of the badge. |