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#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Chip Props API

children React.ReactNode Required
Specifies the content of the Chip.
onClick KeyboardEventHandler & MouseEventHandler
Click handler for the whole Chip, has effect only when Chip does not have any interactive icons.
className string
Specifies an additional className to add to the base element.
variant typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS]
The Chip style variant to use.
Default'light'
iconBefore React.ComponentType
An icon component to render before the content. Example import of a Paragon icon component:

import { Check } from '@openedx/paragon/icons';
iconBeforeAlt string
Specifies icon alt text.
iconAfter 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 string
Specifies icon alt text.
onIconBeforeClick KeyboardEventHandler & MouseEventHandler
A click handler for the Chip icon before.
onIconAfterClick KeyboardEventHandler & MouseEventHandler
A click handler for the Chip icon after.
disabled boolean
Disables the Chip.
Defaultfalse
isSelected boolean
Indicates if Chip has been selected.
Defaultfalse

Usage Insights#

Chip

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	22.20.3	3
frontend-app-course-authoring	23.15.1	4
frontend-app-discussions	23.16.0	15
frontend-app-learner-portal-enterprise	22.17.0	5
frontend-app-library-authoring	21.11.3	5
frontend-app-support-tools	23.4.2	4

Edit this page Leave feedback

Paragon Design System

Chip

Basic Usage

Clickable Variant

With isSelected prop

With Icon Before and After

Basic Usage

Clickable icon variant

Inverse Pallete

Theme Variables#

Props API#

Usage Insights#

Chip

All components (A-Z)

Chip

Basic Usage#

Clickable Variant#

With isSelected prop#

With Icon Before and After#

Basic Usage#

Clickable icon variant#

Inverse Pallete#

Theme Variables#

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