Developer Pills
jsx
import Pills from 'intergalactic/pills';import Pills from 'intergalactic/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
jsx
import Pills from 'intergalactic/pills';
<Pills.Item />;import Pills from 'intergalactic/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.
jsx
import Pills from 'intergalactic/pills';
<Pills.Item.Addon />;import Pills from 'intergalactic/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.
jsx
import Pills from 'intergalactic/pills';
<Pills.Item.Text />;import Pills from 'intergalactic/pills';
<Pills.Item.Text />;