Pills
Components5.8.2
Pills
import Pills from '@semcore/ui/pills';
type
PillsProps
NeighborLocationProps & BoxProps & {...}
Property | Description |
---|---|
size "l" | "m" | Pills size |
disabled boolean | Disabled state |
onChange ((value: PillsValue, e: React.SyntheticEvent) => void) | React.Dispatch | Called when the selection is changed |
value | Value for the selected pill |
defaultValue | Default value for the selected pill |
behavior "tabs" | "radio" = tabs | Sets semantic role for corresponding behavior,
when set to It's recommended to use |
Pill.Item
import Pills from '@semcore/ui/pills';
<Pills.Item />;
type
PillProps
BoxProps & NeighborItemProps & KeyboardFocusProps & {...}
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 />;