On this page:

Chip

Note

An interactive element used for triggering actions, making selections, or filtering content.

Design checklist

StatusItemDescription
AnatomyIncludes descriptions of all parts of the component and its major variants.
StatesIncludes all applicable interaction, display and value states.
OptionsIncludes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.)
✔️Color schemesIncludes both light and dark color schemes.
BehaviorsIncludes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow).
Accessibility: Keyboard interactionsIncludes descriptions of all keyboard interactions, focus indication and navigation order.
Accessibility: Text contrastText meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA).
Accessibility: UI component contrastVisual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA).
Usage guidelinesIncludes a list of recommended and discouraged usages.
Content guidelinesIncludes content standards and guidelines for how to write or format in-product content for the component.
InternationalizationIncludes support for various locales and bi-directionality (RTL).
Design tokensAll design attributes (color, typography, layout, animation, etc.) are available as design tokens.

Anatomy

Default

States

Interaction states

Enabled
Hovered
Pressed
Focused
Disabled
Pending

Value states

Unchecked
Checked
Unselected
Selected

Options

Type
Kind
Color
Size
Icon
Avatar

Behaviors