Pills

import Pills from '@semcore/ui/pills';

PillsProps

& & & {...}

Name	Type	Description
size	"l" | "m"	Pills size
disabled	boolean	Disabled state
onChange	((value: , e: React.SyntheticEvent<>) => void) | React.Dispatch<React.SetStateAction<>>	Called when the selection is changed
value		Value for the selected pill
defaultValue		Default value for the selected pill
behavior	"tabs" | "radio" | "auto" | "manual"	Sets semantic role for corresponding behavior, when set to `auto` pressing left and right arrows selects corresponding sibling pill. It's recommended to use `auto` behavior in forms while `manual` behavior for navigation and layout.

Pill.Item

import Pills from '@semcore/ui/pills';
<Pills.Item />;

PillProps

& & & {...}

Name	Type	Description
value		Pill value
disabled	boolean	Disabled state
selected	boolean	Selected state
addonLeft	React.ElementType	Left addon text
addonRight	React.ElementType	Right addon tag

Pill.Item.Addon

The addon inside the pill (most often it is an icon) places the correct indent units depending on the size. Takes all properties of the Box.

import Pills from '@semcore/ui/pills';
<Pills.Item.Addon />;

Pill.Item.Text

Plain text, it sets correct indents depending on the size. If only text with no addons is used in the pill, it will be wrapped in Pills.Item.Text automatically. Takes all properties of the Box.

import Pills from '@semcore/ui/pills';
<Pills.Item.Text />;