Chip
Chips are compact elements that represent an input, attribute, or action. Similar to the Badge component, but interactive.
Basic Usage
With icon before and remove icon
Theme Variables (SCSS)#
// Chip$chip-padding-y: .125rem !default;$chip-padding-x: .5rem !default;$chip-margin-inline: .5rem !default;$chip-border-radius: .4375rem !default;$chip-border-width: .0625rem !default;$chip-font-size: .75rem !default;$chip-font-weight: 400 !default;$chip-line-height: 1.5rem !default;$chip-disable-opacity: .3 !default;$chip-theme-variants: ("light", "dark") !default;$chip-theme-colors: ("light-background-inactive": $white,"light-text-inactive": $primary-700,"light-border-inactive": $light-300,"light-background-hover": $primary-500,"light-text-hover": $white,"light-border-hover": $white,"light-background-selected": $white,"light-text-selected": $primary-700,"light-border-selected": $primary-700,"dark-background-inactive": $primary-300,"dark-text-inactive": $white,"dark-border-inactive": $primary-300,"dark-background-hover": $white,"dark-text-hover": $primary-700,"dark-border-hover": $primary-300,"dark-background-selected": $primary-300,"dark-text-selected": $white,"dark-border-selected": $white,) !default;
Chip Props API
- as
elementTypeDefault'button'Specifies the base HTML element.
- className
stringSpecifies an additional
classNameto add to the base element. - children
nodeDefaultnullSpecifies the content of the
Chip. - variant
enum'light' | 'dark'Default'light'The
Chipstyle variant to use. - active
boolDefaultfalseAdds the
activeclass to theChip. - disabled
boolDefaultfalseDisables the
Chip. - href
stringProviding a
hrefwill render an<a>element, styled as a button. - iconBefore
nodeAn icon component to render before the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons'; - iconAfter
nodeAn icon component to render before after the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons'; - onClick
funcDefault() => {}A click handler for the
Chip