What does the component do?
A Chip-Label is a compact text element.
When should the component be used?
- To display short, concise information.
Rules.
- A Chip-Label should be labelled clearly and briefly.
- The label must not be too long and must always be displayed in a single line.
- Chips should have sufficient space between them to enable clear separation and simple operation.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Text | Label | No |
Playground.
The <sbb-chip-label> is a visual component used to display compact information, like a filter's name or a tag.
<sbb-chip-label>On sale</sbb-chip-label>
Style.
It's possible to choose among different values for the size property (xxxs, xxs (default), xs, and s),
and four different values for the color property (charcoal, granite, white and milk, which is the default).
<sbb-chip-label color="charcoal" size="s">Label</sbb-chip-label>
<sbb-chip-label color="granite" size="xs">Label</sbb-chip-label>
<sbb-chip-label color="white">Label</sbb-chip-label>
API Documentation.
class: SbbChipLabelElement, sbb-chip-label.
Properties.
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
color | color | public | 'milk' | 'charcoal' | 'white' | 'granite' | 'milk' | Color of the chip. |
size | size | public | 'xxxs' | 'xxs' | 'xs' | 's' | 'xxs' | Size of the chip. |
Slots.
| Name | Description |
|---|---|
Use the unnamed slot to add content to the sbb-chip-label. |