Chip-Label Info

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.
 Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Text Label No
Demo

Playground

Label
Color Charcoal Milk Granite White Sizes XXS XS S Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Milk XXS
Try it out on Storybook Show HTML
Milk XS
Try it out on Storybook Show HTML
Milk S
Try it out on Storybook Show HTML
Charcoal
Try it out on Storybook Show HTML
White
Try it out on Storybook Show HTML
Granite
Try it out on Storybook Show HTML
Fixed Width
Try it out on Storybook Show HTML
Fixed Width Long Label
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

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 three different values for the size property (s, xs and xxs, which is the default),
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 'xxs' | 'xs' | 's' 'xxs' Size of the chip.

Slots

Name Description
Use the unnamed slot to add content to the sbb-chip-label.