Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Chip

v.1.0.0 | Saturn
Healthy
StorybookFigma

Small elements that represent an input, attribute or action. They allow users to enter information, make sections, filter content or trigger actions.

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
width
and
height
fluid (content) - _border_ _border_50_.

2

Label
Required
The label can represent date range, filters or currency range.

3

Close icon
Required
Used to close or removed a chip.

4

Label to
Required
Preposition between titles.

5

Left icon
It helps to quickly understand the meaning of the action. Use only in the Keywords chip.

Foo

NameDescription

1

Container
Required
width
and
height
fluid (content) - _border_ _border_50_.

2

Label
Required
The label can represent date range, filters or currency range.

3

Close icon
Required
Used to close or removed a chip.

4

Error icon
Required
The error icon is used to alert the user about an error.

5

Error label
Required
Helps the user to identify the problematic that causes the error.

6

Left icon
It helps to quickly understand the meaning of the action. Use only in the Keywords chip.

States

Default

  • A default state communicates an interactive component or element.

    • Error

  • The error state communicates that something is not right. In the case of chip, it can usually be due to system errors or an error when making a selection

    • Disabled

  • It shows the chip deactivated, therefore it cannot be closed.

    • Keyboard focus

  • A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.

    • Options

    Only text

  • The chips can display a single label such as concepts or keywords.

    • With icon

  • In some cases, the chips could have an icon to reinforce the content meaning of the label. These icons would only appear when there is only in keywords chips.

    • Date range

  • They can also show 2 labels that could represent ranges of dates.

    • Currency range

  • They can also show 2 labels that could represent ranges of monetary amounts.

    • Behaviours

    Foo

    • Multiple chips

    Chip are not automatically discarded. They persist on the page until the user discards them by clicking (desktop) or tapping (tablet, mobile) on the close button. The chips are accumulated one after the other (respecting horizontal padding of 12px ), towards the right side. If necessary, they can move to a second line respecting the vertical padding of 16px.

    Foo

    • Remove chips

    As soon as we close a chip, it disappears from the block and its place is taken by the chip that preceded it. will always readjust from right to left and bottom to top.

    Do's and dont's

    Foo

    Do’s

    Labels will always be lowercase.

    Foo

    Do’s

    Chip icons will only appear on 1 keyword chips.

    Foo

    Don’t

    In range chips (whether numerical or date) they may not have icons that reinforce.

    ChipUsage
    ChipCode API