React Chip Set Component Styling

Chip Set Styling

Learn how to customize the React Chip Set component with CSS variables and SASS for flexible spacing and seamless integration into your design system.

On this page

CSS variables#

React Chip Set supports CSS variables for easy customization. These variables are defined in CoreUI Sass and can also be overridden directly in your stylesheets or inline styles.

--cui-chip-set-gap: #{$chip-set-gap};

How to use CSS variables#

const customVars = {
  '--cui-chip-set-gap': '0.5rem',
}

return (
  <CChipSet style={customVars}>
    <CChip value="apple">Apple</CChip>
    <CChip value="banana">Banana</CChip>
  </CChipSet>
)

SASS variables#

$chip-set-gap: .25rem !default;