Pill
Pill is a small visual element that can contain descriptive text and an icon. You can use pills to label, filter or sort interactive content, trigger actions or make selections.
Also known as: Chip, Badge
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- To organize selections that don’t necessarily belong to the same category or need to be arranged in a certain way.
- To trigger an immediate action such as filtering a view of content by a specific property.
- To enable an action that could change depending on the context. In a messaging application, you could use pills to display predefined replies that change depending on the received message.
- To organize selections belonging to the same category in a clear hierarchical way. Instead, use
Checkbox. - To switch between views (e.g., Grid view vs. Card view). Instead, use
ToggleButton. - For binary actions that take effect immediately. Instead, use
Switch. - For actions that do not dynamically change with the context. Instead, use
Button. - For labeling. Instead, use
Tag.
- Content should be succinct, often one or a couple of words. Avoid using sentences.
- Keep pill labels as simple as possible, given the limited space
- Use title or sentence case when labeling pills. This maintains a visual distinction between
PillandButton, which always has uppercase labels.
To import Pill and related components from the core Salt package, use:
- To organize selections that don’t necessarily belong to the same category or need to be arranged in a certain way.
- To trigger an immediate action such as filtering a view of content by a specific property.
- To enable an action that could change depending on the context. In a messaging application, you could use pills to display predefined replies that change depending on the received message.
- To organize selections belonging to the same category in a clear hierarchical way. Instead, use
Checkbox. - To switch between views (e.g., Grid view vs. Card view). Instead, use
ToggleButton. - For binary actions that take effect immediately. Instead, use
Switch. - For actions that do not dynamically change with the context. Instead, use
Button. - For labeling. Instead, use
Tag.
- Content should be succinct, often one or a couple of words. Avoid using sentences.
- Keep pill labels as simple as possible, given the limited space
- Use title or sentence case when labeling pills. This maintains a visual distinction between
PillandButton, which always has uppercase labels.
To import Pill and related components from the core Salt package, use:
- To organize selections that don’t necessarily belong to the same category or need to be arranged in a certain way.
- To trigger an immediate action such as filtering a view of content by a specific property.
- To enable an action that could change depending on the context. In a messaging application, you could use pills to display predefined replies that change depending on the received message.
- To organize selections belonging to the same category in a clear hierarchical way. Instead, use
Checkbox. - To switch between views (e.g., Grid view vs. Card view). Instead, use
ToggleButton. - For binary actions that take effect immediately. Instead, use
Switch. - For actions that do not dynamically change with the context. Instead, use
Button. - For labeling. Instead, use
Tag.
- Content should be succinct, often one or a couple of words. Avoid using sentences.
- Keep pill labels as simple as possible, given the limited space
- Use title or sentence case when labeling pills. This maintains a visual distinction between
PillandButton, which always has uppercase labels.
To import Pill and related components from the core Salt package, use: