Skip to main content Skip to docs navigation
View on GitHub

Chip

Compact interactive elements that represent attributes, filters, or selections, often used for tags, categories, or removable choices.

On this page
This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Tokens

Standardized design system values that define consistent visual properties across chip components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.

Legend:
  • Granular tokens that affect only this component.
  • Granular tokens that affect other components.
  • Semantic tokens that affect the whole application.
  • Base tokens that affect the whole application.

Colors

Color tokens are listed for the default variant only. Other context variants follow the same token pattern with variant-specific color values.

context:
default
style:
solid
Component TokenBase Token
color.context.default.fg-idle {color.base.context.light.default.fg-main}
color.context.default.fg-hover rgba({color.base.context.light.default.fg-main}, {opacity.level.90})
color.context.default.fg-press rgba({color.base.context.light.default.fg-main}, {opacity.level.90})
color.context.default.fg-disabled rgba({color.base.context.light.default.fg-main}, {opacity.context.fg-slight})
color.context.default.bg-idle {color.base.context.light.default.bg-main}
color.context.default.bg-hover {color.base.context.light.default.bg-even}
color.context.default.bg-press {color.base.context.light.default.bg-evident}
color.context.default.bg-disabled {color.base.palette.light.neutral.20}
color.context.default.border-main {color.base.palette.light.neutral.40}
color.context.default.transparent-color rgba({color.base.palette.light.black.base}, {opacity.level.zero})
context:
default
style:
smooth
Component TokenBase Token
color.context.default.fg-main {color.base.palette.light.neutral.90}
color.context.default.bg-even {color.base.palette.light.neutral.05}
color.context.default.fg-slight rgba({color.base.context.light.default.fg-main}, {opacity.context.fg-slight})
color.context.default.transparent-color rgba({color.base.palette.light.black.base}, {opacity.level.zero})
context:
default
style:
outline
Component TokenBase Token
color.context.default.base-color {color.base.palette.light.black.base}
color.context.default.fg-slight rgba({color.base.context.light.default.fg-main}, {opacity.context.fg-slight})
color.context.default.transparent-color rgba({color.base.palette.light.black.base}, {opacity.level.zero})

Typography

Component TokenBase Token
font.chip.medium {font.text.small.strong}
font.chip.large {font.text.medium.strong}
font.chip.small {font.text.xsmall.strong}

Sizing

Component TokenBase Token
size.chip.medium-main {size.unit.32}
size.chip.medium-avatar {size.unit.24}
size.chip.medium-icon {size.unit.20}
size.chip.large-main {size.unit.40}
size.chip.large-avatar {size.unit.32}
size.chip.large-icon {size.unit.24}
size.chip.small-main {size.unit.24}
size.chip.small-avatar {size.unit.20}
size.chip.small-icon {size.unit.16}

Spacing

Component TokenBase Token
space.chip.medium-padding-y {space.unit.4}
space.chip.medium-padding-x {space.unit.4}
space.chip.medium-gap {space.unit.8}
space.chip.medium-nudge {space.unit.4}
space.chip.large-padding-y {space.unit.4}
space.chip.large-padding-x {space.unit.4}
space.chip.large-gap {space.unit.12}
space.chip.large-nudge {space.unit.4}
space.chip.small-padding-y {space.unit.2}
space.chip.small-padding-x {space.unit.2}
space.chip.small-gap {space.unit.8}
space.chip.small-nudge {space.unit.4}

Border Width

style:
solid, smooth
Component TokenBase Token
borderWidth.chip.main {borderWidth.context.medium}
style:
outline
Component TokenBase Token
borderWidth.context.large {size.unit.d15}

Border Radius

Component TokenBase Token
borderRadius.chip.medium {borderRadius.base.chip.medium}
borderRadius.chip.large {borderRadius.base.chip.large}
borderRadius.chip.small {borderRadius.base.chip.small}