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>

`Chip` Carousel

<OverflowScroll ariaLabel="example chip carousel" hasInteractiveChildren>
  <OverflowScrollContext.Consumer>
    {({
      overflowRef,
      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={overflowRef} 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>
    {({
      overflowRef,
      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={overflowRef} 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;

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.

Paragon Design System

Chip

Basic Usage

With Icon Before and After

`Chip` Carousel

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#

Chip Carousel#

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

`Chip` Carousel