Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill

v.1.0.0 | Saturn
Healthy
StorybookFigma

Selector that allows the user to choose between all the available options.

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
width
and
height
fluid (content).

2

label
Required
The label can represent search terms, filters, or keywords. It can be text or numbers.

3

Border
Defines the clickable area of the component _border_ _border_50_.

4

Left icon
It helps to quickly understand the meaning of the action. Left icon will be decorative.

5

Right icon
Check icon will be shown when the pill is selected.

States

Default

  • A default state communicates an interactive component or element.

    • Selected

  • Selected state communicates a component or element is being selected. Check icon is used when is selected state.

    • Disabled unselected

  • A disabled state communicates a non interactive component or element.

    • Disabled selected

  • A disabled state communicates a non interactive component or element.

    • 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

    No icon

  • Icons are optional elements and can be hidden.

    • With decorative icon

  • Variants with decorative icon can be used when you need to give more information.

    • Sizes

    L (48px)

  • General used option.

    • S (40px)

  • It is used in places where space can be a bit tight.

    • XS (32px)

  • It is used in places where space can be tighter.

    • Behaviours

    • 2 lines pills

    Pills can move to a second line respecting the vertical padding of 16px when there are more than the width of the container.

    Foo

    • Simple selection

    In the simple selection, only one option can be selected. If you select one and then another, the last one will be deselected.

    Foo

    • Multiple selection

    In the multiple selection, more than one option can be selected.

    Foo

    Do's and dont's

    Foo

    Don’t

    The size of the pills cannot be different in the same selection

    Foo

    Do’s

    Use lower case text.

    Foo

    Don’t

    Use capital letter text.

    Foo

    Don’t

    Long texts can provide information that is not very concise and may lose the user's attention.

    Foo

    Do’s

    The minimum number of characters is two.

    PillUsage
    PillCode API