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