Skip to content

Pills

Components
4.4.18

Pills

import Pills from '@semcore/ui/pills';
interface
IPillsProps extends INeighborLocationProps
PropertyDescription
size
"l" | "m"

Pills size

disabled
boolean

Disabled state

onChange
(value: PillsValue, e: React.SyntheticEvent) => void

Called when the selection is changed

value

Value for the selected pill

defaultValue

Default value for the selected pill

Pill.Item

import Pills from '@semcore/ui/pills';
<Pills.Item />;
interface
IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps
PropertyDescription
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 />;