Chip

Edit this page Leave feedback

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

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip>New</Chip>
  <Chip disabled>New</Chip>
</Stack>

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip>New</Chip>
  <Chip disabled>New</Chip>
</Stack>

Clickable Variant

Use onClick prop to make the whole Chip clickable, this will also add appropriate styles to make Chip interactive.

Show editable code example

Any Paragon component or export may be added to the code example.

<Chip onClick={() => console.log('Click!')}>Click Me</Chip>

<Chip onClick={() => console.log('Click!')}>Click Me</Chip>

With isSelected prop

Show editable code example

Any Paragon component or export may be added to the code example.

<Chip isSelected>New</Chip>

<Chip isSelected>New</Chip>

With Icon Before and After

Basic Usage

Use iconBefore and iconAfter props to provide icons for the Chip, note that you also can provide accessible names for these icons for screen reader support via iconBeforeAlt and iconAfterAlt respectively.

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip iconBefore={Person} iconBeforeAlt="icon-before">Person</Chip>
  <Chip iconAfter={Close} iconAfterAlt="icon-after">Close</Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
  >
    Both
  </Chip>
</Stack>

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip iconBefore={Person} iconBeforeAlt="icon-before">Person</Chip>
  <Chip iconAfter={Close} iconAfterAlt="icon-after">Close</Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
  >
    Both
  </Chip>
</Stack>

Clickable icon variant

Provide click handlers for icons via onIconAfterClick and onIconBeforeClick props.

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip
    iconBefore={Person}
    iconBeforeAlt="icon-before"
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
  >
    Person
  </Chip>
  <Chip
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
  >
    Close
  </Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
  >
    Both
  </Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
    disabled
  >
    Both
  </Chip>
</Stack>

<Stack
  gap={2}
  direction="horizontal"
>
  <Chip
    iconBefore={Person}
    iconBeforeAlt="icon-before"
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
  >
    Person
  </Chip>
  <Chip
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
  >
    Close
  </Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
  >
    Both
  </Chip>
  <Chip
    iconBefore={Person}
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    onIconBeforeClick={() => console.log('onIconBeforeClick')}
    iconAfterAlt="icon-after"
    iconBeforeAlt="icon-before"
    disabled
  >
    Both
  </Chip>
</Stack>

Note: both Chip and its icons cannot be made interactive at the same time, e.g. if you provide both onClick and onIconAfterClick props, onClick will be ignored and only the icon will get interactive behaviour, see example below (this is done to avoid usability issues where users might click on the Chip itself by mistake when they meant to click the icon instead).

Show editable code example

Any Paragon component or export may be added to the code example.

<Chip
  iconBefore={Person}
  iconBeforeAlt="icon-before"
  onIconBeforeClick={() => console.log('onIconBeforeClick')}
  onClick={() => console.log('onClick')}
>
  Person
</Chip>

<Chip
  iconBefore={Person}
  iconBeforeAlt="icon-before"
  onIconBeforeClick={() => console.log('onIconBeforeClick')}
  onClick={() => console.log('onClick')}
>
  Person
</Chip>

Inverse Pallete

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack
  className="bg-dark-700 p-4"
  gap={2}
  direction="horizontal"
>
  <Chip variant="dark" iconBefore={Person} iconBeforeAlt="icon-before">New</Chip>
  <Chip
    variant="dark"
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
  >
    New 1
  </Chip>
  <Chip
    variant="dark"
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
    disabled
  >
    New
  </Chip>
</Stack>

<Stack
  className="bg-dark-700 p-4"
  gap={2}
  direction="horizontal"
>
  <Chip variant="dark" iconBefore={Person} iconBeforeAlt="icon-before">New</Chip>
  <Chip
    variant="dark"
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
  >
    New 1
  </Chip>
  <Chip
    variant="dark"
    iconAfter={Close}
    onIconAfterClick={() => console.log('onIconAfterClick')}
    iconAfterAlt="icon-after"
    disabled
  >
    New
  </Chip>
</Stack>

Theme Variables (SCSS)#

$chip-padding-x:                             .5rem !default;
$chip-padding-y:                             1px !default;
$chip-icon-margin:                           .25rem !default;
$chip-margin:                                .125rem !default;
$chip-border-radius:                         .375rem !default;
$chip-disable-opacity:                       .3 !default;
$chip-icon-size:                             1.5rem !default;
$chip-label-color:                           $primary-700 !default;
$chip-border-color:                          $light-800 !default;
$chip-outline-width:                         3px !default;
$chip-light-bg-color:                        $white !default;
$chip-light-outline-color:                   $chip-label-color !default;
$chip-light-selected-outline-distance:       3px !default;
$chip-light-selected-focus-border-color:     $dark-500 !default;
$chip-light-hover-bg:                        $dark-500 !default;
$chip-light-hover-border-color:              $chip-light-hover-bg !default;
$chip-light-hover-label-color:               $chip-light-bg-color !default;
$chip-light-hover-icon-color:                $chip-light-hover-label-color !default;
$chip-light-focus-outline-distance:          .313rem !default;
$chip-dark-bg:                               $primary-300 !default;
$chip-dark-outline-color:                    $white !default;
$chip-dark-selected-outline-distance:        3px !default;
$chip-dark-selected-focus-border-color:      $chip-dark-outline-color !default;
$chip-dark-label-color:                      $chip-dark-outline-color !default;
$chip-dark-hover-bg:                         $white !default;
$chip-dark-hover-border-color:               $chip-dark-hover-bg !default;
$chip-dark-hover-label-color:                $primary-500 !default;
$chip-dark-focus-outline-distance:           .313rem !default;

Props API#

Chip Props API

children node Required
Specifies the content of the Chip.
className string
Specifies an additional className to add to the base element.
variant enum'light' | 'dark'
The Chip style variant to use.
DefaultSTYLE_VARIANTS.LIGHT
disabled bool
Disables the Chip.
Defaultfalse
onClick func
Click handler for the whole Chip, has effect only when Chip does not have any interactive icons.
iconBefore PropTypes.elementType as Requireable<React.ComponentType>
An icon component to render before the content. Example import of a Paragon icon component:
import { Check } from '@openedx/paragon/icons';
iconBeforeAlt requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick'])
Specifies icon alt text.
onIconBeforeClick func
A click handler for the Chip icon before.
iconAfter PropTypes.elementType as Requireable<React.ComponentType>
An icon component to render before after the content. Example import of a Paragon icon component:
import { Check } from '@openedx/paragon/icons';
iconAfterAlt requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick'])
Specifies icon alt text.
onIconAfterClick func
A click handler for the Chip icon after.
isSelected bool
Indicates if Chip has been selected.
Defaultfalse

Usage Insights#

Chip

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	10
frontend-app-course-authoring	22.8.1	4
frontend-app-learner-dashboard	22.9.0	2
frontend-app-learner-portal-enterprise	21.13.1	5
frontend-app-support-tools	21.13.1	4
prospectus	20.46.2	2

Edit this page Leave feedback

Paragon Design System

Theme

Chip

Basic Usage

Clickable Variant

With isSelected prop

With Icon Before and After

Basic Usage

Clickable icon variant

Inverse Pallete

Theme Variables (SCSS)#

Props API#

Usage Insights#

Chip

All components (A-Z)

Theme

Chip

Basic Usage#

Clickable Variant#

With isSelected prop#

With Icon Before and After#

Basic Usage#

Clickable icon variant#

Inverse Pallete#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Chip

All components (A-Z)

Basic Usage

Clickable Variant

With isSelected prop

With Icon Before and After

Basic Usage

Clickable icon variant

Inverse Pallete