Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tag

v.1.0.0 | Saturn
Healthy
StorybookFigma

Component

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
width
Fluid (content) -
height
Fixed

2

Label
Required
Describes the status os the element where the tag is in. Always capital letters.

3

Left icon
Helps to understand the context of the tag content.

4

Border
Required
It can highlight the status.

Options

Healthy/Success

  • Positive feedback (approved, complete, success, new, purchased, licensed)

    • Informative

  • Informative feedback (active, in use, live, published)

    • Known issues/Warning

  • Warning feedback(alert, rejected)

    • Dormant/Error

  • Negative feedback (error, failed)

    • Deprecated/Neutral

  • Neutral feedback (archived, deleted, paused, draft, not started, ended)

    • Behaviour

    Natural growth

  • The tags grow within the container in which they are placed as much as the parent container allows. If the tag content is longer than it can grow inside the parent, the tag text will be collapsed and an ellipsis will be displayed.

    • More than one tag

  • Tags can be used alone or combined with several tags at the same time.

    • Alignment within a container

  • Tag can be aligned on the left and right part of the father container or on the bottom-right part.

    • Do's and dont's

    Foo

    Caution

    Better use capitalized text, as the user sees it better and faster.

    Foo

    Don’t

    It is not recommended to use more than two tags because it is too much information for the user.

    TagUsage
    TagCode API