npm_versionnpm Paragon package page

The ChipCarousel component creates a scrollable horizontal block of chips with buttons for navigating to the previous and next set of chips.

Basic Usage

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

Theme Variables (SCSS)#

$chip-carousel-controls-top-offset: .375rem !default;
$chip-carousel-container-padding-x: .625rem !default;
$chip-carousel-container-padding-y: .313rem !default;

Props API#

ChipCarousel Props API
  • ariaLabel string Required

    Text describing the ChipCarousel for screen readers.

  • className string

    Specifies class name for the ChipCarousel.

  • items element[] Required

    Specifies array of Chip elements to be rendered inside the carousel.

  • disableOpacityMasks bool

    Whether the default opacity masks should be shown at the start/end, if applicable.

  • onScrollPrevious func

    Callback function for when the user scrolls to the previous element.

  • onScrollNext func

    Callback function for when the user scrolls to the next element.

  • canScrollHorizontal bool

    Whether users can scroll within the overflow container.

  • offset number | string

    A value specifying the distance the scroll should move.

  • offsetType enum'percentage' | 'fixed'

    Type of offset value (percentage or fixed).

  • gap number

    Specifies inner space between children blocks.

    Valid values are based on the spacing classes: 0, 0.5, ... 6.