Live Demo
Anatomy
Badges serve to categorize information, highlight notifications, or indicate status. Each badge includes:
- Badge base
- Avatar
- Label
- Close
Layout & Spacing
Ensure proper spacing and layout considerations for badges, including elements such as badge base, avatar, label, and icons.
Variations
The variations of chip include the following categories,with leading icon(image), with tailing icon, with both leading and tailing icon, with avatar,with icon only, with only base label, with avatar and tailing icon.
Size
Chips are available in two sizes, small and medium. When the chips are used inside the table, small size is used and in the rest of the cases the default size used is medium.
Guidelines
- Only include one label per badge.
- Keep label text concise and unambiguous.
Keep label text concise and unambiguous.
Use buttons for actions (instead of chips).
Chips should be used in a group.
Avoid using standalone chips.