Pills
Components4.4.18
Pills
import Pills from '@semcore/ui/pills';
interface
IPillsProps extends INeighborLocationProps| Property | Description |
|---|---|
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| Property | 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 />;