Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Chip

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style the chip component is CHIP_STYLES.

You can not change the name of the object of tokens.

Chip component has one way to modify the styles:

  • Variant: modify the styles of the Chip.

The structure of the CHIP_STYLES object is:

Variants and States

Variants can modify the styles for each state of the Chip. The states are:

12345
enum ChipStateType {
  DEFAULT
  ERROR
  DISABLED
}

For each state the next tokens can be used:

12345678910
const CHIP_STYLES = {
  [VARIANT]:{
    [STATE]: {
      chipContainer?: CommonStyleType;
      leftIcon?: IconTypes;
      label?: TypographyTypes;
      rangeItemWrapper?: CommonStyleType;
      rangeItemText?: TypographyTypes;
      rangeItemSeparator?: TypographyTypes;
      rangeIcon?: IconTypes;

Example

chip theme object example:

12345678910
const CHIP_STYLES = {
  [VARIANT]: {
    [STATE]: {
      chipContainer: {
        margin: 'margin',
      },
      label: {
        font_variant: 'font-variant',
        font_weight: 'font-weight',
        color: 'color',
ChipCode API
ChipAccessibility