Chip

Chips are used to select from a set of defined options. Chips can also represent a set of chosen options.

Demo

<Chip>Hello world</Chip>

Usage

When to use

• Choose from defined options. Use chips to represent a set of options. Each option is represented by a chip. Choosing a chip updates another area or object.
• Add or remove options. Chips can be used to show items or attributes assigned to an object, like choosing filters to be applied to a list.

When not to use

• Actions. Don't use chips for triggering actions. Use a Button instead.
• Display only. Don't use chips if they aren't interactive. For displaying a status or label, use a Tag instead.

Format

Content

• Keep chip labels short. Chips with long labels don't work well in a group.
• Don't use action verbs in chip labels. Chips for choosing a dashboard to view should use the dashboard name without any verb as a label.

Size

Demo

<Chip dense>Hello world</Chip>

• Chips are available in two sizes, regular and dense.
• Use regular sized chips where there is space.
• Use dense sized chips in information-dense pages, or inside other components.

Spacing

• Chips have a default margin, so that they'll be spaced correctly in a group.
• A smaller margin can be useful for dense chips when space is limited.
• Always include some space between chips in a group.

Options

Single or multiple selection

• A group of chips can allow choosing or one chip or several chips.
• Single selection. Choosing one chip is useful when toggling between objects, like choosing which dashboard to view.
• Multiple selection. Choosing several chips is useful when applying options to something, like applying filters to a list of data, or choosing options from a list.

Removable

Demo

<Chip onRemove>Hello world</Chip>

• Use removable chips if an option can be removed from the group.
• Only use removable chips when chips can be added back to the same group through another action, like choosing from a menu.

Icon

Demo

<Chip icon={<IconStar24 />}>Hello world</Chip>

• Chips can show an icon before the text label.
• Icons are useful to highlight special chips, like starred items.
• Don't use the same icon for all the chips in a group. Use a title or heading for that group of chips instead.

API Reference

Chip

Usage

To use Chip, you can import the component from the @dhis2/ui library

import { Chip } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
children	any
className	string
dataTest	string	'dhis2-uicore-chip'
dense	boolean
disabled	boolean
dragging	boolean
icon	element
marginBottom	number	4		margin-bottom value, applied in px
marginInlineEnd	number			margin-inline-end value, applied in px
marginInlineStart	number			margin-inline-start value, applied in px
marginLeft	number			margin-inline-start value, applied in px
marginRight	number			margin-inline-end value, applied in px
marginTop	number	4		margin-top value, applied in px
overflow	boolean
selected	boolean
onClick	function
onRemove	function