Chip

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.

<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

Show editable code example

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

<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>

`Chip` Carousel

Show editable code example

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

<OverflowScroll ariaLabel="example chip carousel" hasInteractiveChildren>
  <OverflowScrollContext.Consumer>
    {({
      setOverflowRef,
      isScrolledToStart,
      isScrolledToEnd,
      scrollToPrevious,
      scrollToNext,
    }) => (
      <>
        <div className="mb-3">
          <Button
            onClick={scrollToPrevious}
            className="mr-2"
            size="sm"
            disabled={isScrolledToStart}
          >
            Previous
          </Button>
          <Button
            onClick={scrollToNext}
            size="sm"
            disabled={isScrolledToEnd}
          >
            Next
          </Button>
        </div>
        <div ref={setOverflowRef} className="d-flex">
          <OverflowScroll.Items>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
          </OverflowScroll.Items>
        </div>
      </>
    )}
  </OverflowScrollContext.Consumer>
</OverflowScroll>

<OverflowScroll ariaLabel="example chip carousel" hasInteractiveChildren>
  <OverflowScrollContext.Consumer>
    {({
      setOverflowRef,
      isScrolledToStart,
      isScrolledToEnd,
      scrollToPrevious,
      scrollToNext,
    }) => (
      <>
        <div className="mb-3">
          <Button
            onClick={scrollToPrevious}
            className="mr-2"
            size="sm"
            disabled={isScrolledToStart}
          >
            Previous
          </Button>
          <Button
            onClick={scrollToNext}
            size="sm"
            disabled={isScrolledToEnd}
          >
            Next
          </Button>
        </div>
        <div ref={setOverflowRef} className="d-flex">
          <OverflowScroll.Items>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
            <Chip iconAfter={Close}>New</Chip>
          </OverflowScroll.Items>
        </div>
      </>
    )}
  </OverflowScrollContext.Consumer>
</OverflowScroll>

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;

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.
Default'light'
disabled bool
Disables the Chip.
Defaultfalse
iconBefore element | func
An icon component to render before the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
onIconBeforeClick func
A click handler for the Chip icon before.
iconAfter element | func
An icon component to render before after the content. Example import of a Paragon icon component:
import { Check } from '@edx/paragon/icons';
onIconAfterClick func
A click handler for the Chip icon after.

Usage Insights#

Chip

Project Name	Paragon Version	Instance Count
frontend-app-learner-dashboard	20.32.0	2
frontend-app-learner-portal-enterprise	20.31.1	3
frontend-app-profile	20.32.3	2

Paragon Design System

Theme

PlaygroundBeta

Chip

Basic Usage

With Icon Before and After

`Chip` Carousel

Theme Variables (SCSS)#

Props API#

Usage Insights#

Chip

All components (A-Z)

Theme

PlaygroundBeta

Chip

Basic Usage#

With Icon Before and After#

Chip Carousel#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Chip

All components (A-Z)

Basic Usage

With Icon Before and After

`Chip` Carousel