Chip

The Chip" component is a versatile UI element commonly used for displaying tags, labels, statuses, or categories. It's highly customizable, enabling the use of different types, colors, sizes, and even adornments like icons. Chips can be interactive, allowing for selection or removal, making them suitable for various applications from filtering content to showing user selections.

Quick Start

To start using the Chip component, import it from the reablocks library.

import { Chip } from 'reablocks';


export default function App() {
  return <Chip>Active</Chip>
}

import { Chip } from 'reablocks';

export default function App() {
  return <Chip>Active</Chip>
}

Active

Examples

Basic Usage

The Chip component supports several style variants such as "filled" and "outline". This allows for clear differentiation between different chip types based on their purpose or context within the UI:

Advanced Customization

Colors and Sizes

Chips can be customized further in terms of color and size, providing flexibility to match them with the application's design theme:

Icon Adornment

Adding icons to chips enhances visual communication and can indicate additional functionalities like deletion or selection:

Selectable Chips

Chips can be made selectable, allowing users to choose one or more options from a set:

Blocks

This component is used in the following Blocks:

Not Found Billing Pricing Profile

Theme Customization

The Chip component comes with a default theme, which can be customized according to your application's design requirements:

root{}(8 keys)

Learn more about how to customize in the Theme documentation.

API

Customize the Chip component using the following properties:

Prop	Description	Default
`color`	Color variant for the chip. `string`	`default`
`size`	Size variant for the chip. `string`	`medium`
`variant`	Style variant for the chip. `string`	`filled`
`selected`	Whether the chip is selected. `boolean`
`disabled`	Whether the chip is disabled. `boolean`
`disableMargins`	Whether to disable the margins. `boolean`
`start`	Content to display before the chip label. `string \| ReactElement<any, string \| JSXElementConstructor<any>>`
`end`	Content to display before the chip label. `string \| ReactElement<any, string \| JSXElementConstructor<any>>`
`theme`	Theme for the Chip. `ChipTheme`
`ref`	Reference to the root element. `LegacyRef<HTMLDivElement>`

Design and Usability Tips

Dynamic Interaction: For chips representing dynamic content (like filters), provide immediate visual feedback when the state changes (e.g., through animation) to reflect the action's impact.
Accessibility Enhancements: Beyond color, utilize shapes or icons within chips to communicate status or category for those with color vision deficiencies.

Button Command Palette