Labels
The
.c-label
component exposes a variety of styling options needed to support
badges, pills, and tags.
Shapes
Use pill or round class modifiers to shape a label. Round labels are intended to contain a minimal number of characters.
Sizes
Labels may be sized small or large.
Colors
Modifiers may be added to override the label color. The component contains light/dark and validation treatments (error, warning, success).
Bedrock color utilities may also be used; however,
you will need to extend with the appropriate
box-shadow treatment if the label is
focusable.
Elements
The label component supports a child remove element. An event listener can be attached to this element to remove the label on click or delete keypress. Remember to use a focusable tag in order to support keyboard focus on the label.
The label may also contain a child avatar element. Pill-styled labels display round avatars.
States
Focus states are shown for the labels included in Garden. Remember to style an accompanying focus state along with custom background color overrides.
The hover state for the label's remove icon is shown below.
Truncation
Labels are designed to display a single line. Use the slider below to change the width of the text field container. Text within the labels will truncate with an ellipsis based on the available container width. Alternate title text is applied to the label element in order to provide access to the truncated text. A min-width should be applied to contained labels (as it is here) with a value that is reasonable for the layout in question.
Playground
If you are visualizing the state of a label with color only (success, failure, etc.) you should include additional accessibility messaging relating to the current state. This can be achieved in the same manner as our removal warning with the .u-visibility-screenreader class.
Additionally, for users that are vision impaired, but do not use a screen reader (color-blind), you should include a visual element along with the color based state.