Chip

Chips are compact elements that represent an input, attribute, or action. Similar to the Badge component, but interactive.

Basic Usage

<div>
  <Chip>New</Chip>
  <Chip disabled>New</Chip>
  <Chip variant="dark">New</Chip>
</div>

<div>
  <Chip>New</Chip>
  <Chip disabled>New</Chip>
  <Chip variant="dark">New</Chip>
</div>

With icon before and after

<div>
  <Chip iconBefore={Person}>New</Chip>
  <Chip
    variant="dark"
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('Remove Chip')}
  >
    New
  </Chip>
  <Chip
    variant="dark"
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('Remove Chip')}
    disabled
  >
    New
  </Chip>
</div>

<div>
  <Chip iconBefore={Person}>New</Chip>
  <Chip
    variant="dark"
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('Remove Chip')}
  >
    New
  </Chip>
  <Chip
    variant="dark"
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('Remove Chip')}
    disabled
  >
    New
  </Chip>
</div>

Theme Variables (SCSS)#

$chip-padding-x:                    .5rem !default;
$chip-padding-y:                    .125rem !default;
$chip-padding-to-icon:              3px !default;
$chip-icon-padding:                 .25rem !default;
$chip-margin:                       .125rem !default;
$chip-border-radius:                .25rem !default;
$chip-disable-opacity:              .3 !default;
$chip-icon-size:                    1.25rem !default;

$chip-theme-variants: (
  "light": (
    "background": $light-500,
    "color": $black,
  ),
  "dark": (
    "background": $dark-200,
    "color": $white,
  )
) !default;

Chip Props API

children node Required Required
Specifies the content of the Chip.
className string Required
Specifies an additional className to add to the base element.
variant enum Required'light' | 'dark'
The Chip style variant to use.
Default'light'
disabled bool Required
Disables the Chip.
Defaultfalse
iconBefore element Required | func Required Required
An icon component to render before the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
iconAfter element Required | func Required Required
An icon component to render before after the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
onIconAfterClick func Required
A click handler for the Chip icon after.
onIconBeforeClick unknown type
onLabelClick unknown type

Paragon Design System

Chip

Basic Usage

With icon before and after

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Chip

Basic Usage#

With icon before and after#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

With icon before and after