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
elementType
Default'button'Specifies the base HTML element.
className
string
Specifies an additional
className
to add to the base element.children
node
DefaultnullSpecifies the content of the
Chip
.variant
enum
'light' | 'dark'Default'light'The
Chip
style variant to use.active
bool
DefaultfalseAdds the
active
class to theChip
.disabled
bool
DefaultfalseDisables the
Chip
.href
string
Providing a
href
will render an<a>
element, styled as a button.iconBefore
node
An icon component to render before the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
iconAfter
node
An icon component to render before after the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
onClick
func
Default() => {}A click handler for the
Chip