Chip#

<Chip color=ChipColor::Primary>"Primary"</Chip> PrimarySecondarySuccessInfoWarnDanger

Dismissible chips#

As chips are often used to convey mutable state, we allow chips to be dismissible. Dismissible chips display an X icon which lets the user dismiss the chip. The component embedding the chip is responsible of actually removing it, e.g. not rendering it again.

<Chip color=ChipColor::Secondary dismissible=move |()| set_dismissed.set(true)> "Dismissible" </Chip> Dismissible

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.

--chip-font-size --chip-margin --chip-padding --chip-border --chip-border-radius --chip-primary-text-color --chip-primary-text-color-hover --chip-primary-background-color --chip-primary-background-color-hover --chip-secondary-text-color --chip-secondary-text-color-hover --chip-secondary-background-color --chip-secondary-background-color-hover --chip-success-text-color --chip-success-text-color-hover --chip-success-background-color --chip-success-background-color-hover --chip-info-text-color --chip-info-text-color-hover --chip-info-background-color --chip-info-background-color-hover --chip-warn-text-color --chip-warn-text-color-hover --chip-warn-background-color --chip-warn-background-color-hover --chip-danger-text-color --chip-danger-text-color-hover --chip-danger-background-color --chip-danger-background-color-hover