@blaze-react/chips

React chips are small blocks of information. They are most commonly used for contacts, tags, selecting an option, filtering content, etc.

Usage no npm install needed!

<script type="module">
  import blazeReactChips from 'https://cdn.skypack.dev/@blaze-react/chips';
</script>

README

Description

React chips are small blocks of information. They are most commonly used for contacts, tags, selecting an option, filtering content, etc.

Usage

<Chips
  modifiers={[
    Chips.availableModifiers.parent.deletable,
    Chips.availableModifiers.parent.small
  ]}
>
  <Chips.Avatar>
    <Avatar username="Lorem Ipsum" modifier="x-small" />
  </Chips.Avatar>
  <Chips.Label>Primary deletable chip</Chips.Label>
  <Chips.Icon modifier={Chips.availableModifiers.icon.delete}>
    <i className="material-icons">delete</i>
  </Chips.Icon>
</Chips>

API

Chips can receive a number of props as follow:
NAME TYPE DEFAULT OPTIONS
modifiers Array of string primary deletable, outlined, secondary, small, primary
action Function () => {}
children single/array of nodes empty