A pill is a visual representation of an attribute, usually representing tags or metrics.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| hasWrap | bool | - | true | Whether or not the token should have a wrap |
| isDismissible | bool | - | false | Determines if token has dismissible feature or not. If true, `onDismiss` is required. |
| style | oneOf 'primary' | 'secondary' | 'tertiary' | 'error' | - | 'secondary' | Determines style of token depending on priority level or error |
| showWell | bool | - | true | Whether or not a well is presented around the token. |
| description | string | - | - | Description explaining the token |
| hasSnugWrap | bool | - | - | Whether or not the token should have a tighter wrap |
| isDraggable | bool | - | - | Shows an icon indicating that the token is draggable |
| name | string | yes | - | Name label on token |
| onDismiss | func | - | - | Function to call that dismisses the token. Required if the token is dismissible. |
| order | number | - | - | Show a number indicating the token's order |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Pills can be non-interactive for display only, as well as interactive for drag reordering and single-click removal. Typically pills display a known entity type in our application such: a tag, audience, interest group, or a user-defined metric.
Best Practices
Do
If your pill text is long consider using the short description area for more text space
Don't
Avoid all uppercase text inside pills