Tags
A Tag is a text-based component that labels and
categorizes items using keywords that describe them for quick recognition.
In some scenarios, these can be added or removed.
Use Case
- Tags are a helper component that shows in a detailed way the criteria specified for an item or a set of items shown on-screen.
Primary
Outline
Success
Warning
Danger
Primary
Outline
Success
Warning
Danger
Outline
Success
Warning
Danger
THIS IS ONE VERY LONG TAG THAT WRAPS IN TWO LINES
THIS IS ONE VERY LONG TAG THAT WRAPS IN TWO LINES
THIS IS ONE VERY LONG TAG THAT WRAPS IN TWO LINES
THIS IS ONE VERY LONG TAG THAT WRAPS IN TWO LINES
HTML
Do's & Dont's
Filtering & Tagging
In most of the cases, tags are going to be related to the filtering
search flows. Keep in mind that the amount of tags can be as many as
specified by the users on the search filter.
A simple component with simple
interactions
A Tag has a very simple behavior that covers two main purposes: to
inform and to suppress itself.
If any other interaction is needed, please consider making use of alternative and related components.
If any other interaction is needed, please consider making use of alternative and related components.
Be aware of possible saturation
When working with tags, It is important to consider not only the
fact that there may be many labels (as mentioned before) populating
the screen, but also that these tags can have very long texts and
they can strongly vary from each other.
Be aware that this can overpopulate the screen and it will be needed to value the impact on the layout and make adjustments accordingly.
Be aware that this can overpopulate the screen and it will be needed to value the impact on the layout and make adjustments accordingly.
Alternative and Related components
