Chips

Chips are compact components that represent discrete information.

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.
The most common use will be in some form of input, so some of the behaviour demonstrated here is not shown in context.

ActionChips

Action chips trigger actions related to primary content.
Despite that buttons are an alternative to action chips, there is an important difference between them. Buttons should appear persistently and consistently, while action buttons should appear dynamically and contextually.

<ActionChip label="default" color="default" />
<ActionChip label="primary" color="primary" />
<ActionChip label="secondary" color="secondary" />

You can declare the desired action with the onClick property.

<ActionChip
  label="with onClick"
  color="default"
  onClick={() => {
    alert("tryin to do something!")
  }}
/>

RemovableChips

Removable chips represent information used in fields, and they can be removed with the help of a remove button.
They enable user input and verify that input by converting text into chips.

<RemovableChip label="default" color="default" />
<RemovableChip label="primary" color="primary" />
<RemovableChip label="secondary" color="secondary" />

You can declare the desired remove action with the onRemove property.

<RemovableChip
  label="with onRemove"
  color="default"
  onRemove={() => {
    alert("tryin to remove!");
  }}
/>

ChoiceChips

Choice chips represent a selection / filters for a collection.
They are a good alternative to toggle buttons, radio buttons, checkboxes, and select menus.

<ChoiceChip label="default" color="default" />
<ChoiceChip label="primary" color="primary" />
<ChoiceChip label="secondary" color="secondary" />

Choice chips can be controlled or uncontrolled.
To set the default state of the uncontrolled choice chips, use defaultSelected property with a boolean value.
To control the state of the controlled choice chips, use selected={boolean} and onToggle properties.

import ChoiceChip from "@sonnat/ui/ChoiceChip";
import * as React from "react";

const ChipControllingDemo = () => {
  const [isSelected, setSelected] = React.useState(false);

  return (
    <React.Fragment>
      <ChoiceChip label="uncontrolled" defaultSelected={true} />
      <ChoiceChip
        label="controlled"
        selected={isSelected}
        onToggle={() => void setSelected(s => !s)}
      />
    </React.Fragment>
  );
};

export default ChipControllingDemo;

Disabled

Disabled chips do not respond to any action.

<ChoiceChip label="default" color="default" disabled />
<RemovableChip label="primary" color="primary" disabled />
<ActionChip label="secondary" color="secondary" disabled />

Rounded

To have a rounded version of chips use rounded property.

<ChoiceChip label="default" color="default" rounded />
<RemovableChip label="primary" color="primary" rounded />
<ActionChip label="secondary" color="secondary" rounded />

Size

To have the larger or smaller chips, use the size property.

<ChoiceChip label="Large" color="default" size="Large" />
<RemovableChip label="Medium (default)" color="primary" size="medium" />
<ActionChip label="Small" color="secondary" size="small" />

Outlined

Outlined chips offer an alternative style.

<ChoiceChip label="default" color="default" variant="outlined" />
<RemovableChip label="primary" color="primary" variant="outlined" />
<ActionChip label="secondary" color="secondary" variant="outlined" />

With Leading Icon

Sometimes you might want to have icons for certain chips to enhance the UX of the application as we recognize imagery more easily than plain text.

<ChoiceChip label="default" color="default" leadingIcon={<Heart />} />
<RemovableChip label="primary" color="primary" leadingIcon={<Heart />} />
<ActionChip label="secondary" color="secondary" leadingIcon={<Heart />} />

API

Learn more about the properties and the customization points.

Usage

import ActionChip from "@sonnat/ui/ActionChip";
import RemovableChip from "@sonnat/ui/RemovableChip";
import ChoiceChip from "@sonnat/ui/ChoiceChip";

//or
import { ActionChip, RemovableChip, ChoiceChip } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Shared Properties

The properties that are common to choice, action, and removable chips.

ActionChip Specific Properties

The properties that are only available to action chips.

RemovableChip Specific Properties

The properties that are only available to removable chips.

ChoiceChip Specific Properties

The properties that are only available to choice chips.