Pills
Purpose
Pills are a visual UI element used for quick recognition and navigation.
Basic Implementation
import Pill from '@wedgekit/pills';
import Button from '@wedgekit/button';
const PillWrapper = styled.div`
max-width: 100%;
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, 133px);
margin-bottom: 16px;
`;
const Example = () => {
const [pills, setPills] = React.useState(['pill']);
return (
<>
<PillWrapper>
{pills.map((value, index) => (
<Pill
actionIcon="close"
color="denim"
label="delete"
thumbnailIcon="trash"
onClick={() => {
setPills((arr) => [...arr.slice(0, index), ...arr.slice(index + 1)]);
}}
/>
))}
</PillWrapper>
<Button
domain="primary"
label="Add Pill"
onClick={() => setPills((arr) => [...arr, 'new pill'])}
>
Add Pill
</Button>
</>
);
};
render(<Example />);Props
actionIcon
Type: string
Required:
Optional icon identifier denoting the action icon (the icon to the right of the text used for ActionPills) to be displayed. ActionIcons MUST be used with ActionPills and MUST NOT be used with other pill components. The icon string must be an Icon Name. Most common: 'plus', 'close'
className
Type: string
Required:
This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.
color
Type: 'terraCotta' | 'azure' | 'graphite' | 'sage' | 'violet' | 'denim'
Required:
A string denoting the pill's color theme.
disabled
Type: boolean
Required:
label
Type: string
Required:
The text of the pill. Will appear to the right of thumbnailIcon and to the left of actionIcon when either are present.
noFill
Type: boolean
Required:
Optional prop to invoke no-fill styling
selected
Type: boolean
Required:
Optional prop to indicate if a pill is selected. See TogglePill and ChoicePill for example of usage.
tabIndex
Type: number
Required:
Optional prop that can be used to directly control the order in which tabbing is nagivated through a form.
thumbnailIcon
Type: string
Required:
Optional prop denoting the thumbnail icon (the non-interactive icon to the left of the text) to be displayed.
onBlur
Type: (e: React.SyntheticEvent) => void
Required:
If an actionIcon is present the onBlur handler will apply only to the icon specifically, otherwise it will apply to the entire pill
onClick
Type: (e: React.SyntheticEvent) => void
Required:
If the 'close' actionIcon is present the onClick handler will apply only to the icon specifically, otherwise it will apply to the entire pill
onFocus
Type: (e: React.SyntheticEvent) => void
Required:
If an actionIcon is present the onFocus handler will apply only to the icon specifically, otherwise it will apply to the entire pill
onKeypress
Type: (e: React.SyntheticEvent) => void
Required:
If an actionIcon is present the onKeypress handler will apply only to the icon specifically, otherwise it will apply to the entire pill
Other Components
@wedgekit/pills exports some more specialized pills which build off the default "base" pill.