The Pills component is used to represent categories, filter options, or navigation items in a compact and visually appealing way. They can be used as tabs or filters to enhance user interaction and content organization.

Key features

• Rounded edges for a modern and friendly appearance.

• Supports different states such as active, inactive, and disabled.

• Available in various sizes to fit different design contexts.

• Color variations to indicate different categories or statuses.

Design considerations

• Ensure pills are large enough to be easily clickable.

• Maintain sufficient spacing between pills to avoid misclicks.

• Use consistent styling for active, inactive, and disabled states.

• Choose colors that align with the overall design system and are distinguishable from one another.

Usage guidelines

• Use pills to categorize or filter content in an intuitive way.

• Ensure that the label on each pill is clear and concise.

• Use different colors or styles to indicate different statuses or categories.

• Group related pills together for better organization and usability.