Component Badge

Badges are components that, like tags, provide additional context to content.

Code

Example

Reminders

New emails

Attr	Type	Default	Docs
close-button-aria-label	string	"dismiss"	This property overrides the close button aria label.
color	"danger" \| "gray" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"	"gray"	This property shows the color of the badge.
dismissible	boolean	false	This boolean determines if a badge can be dismissed.
icon	string		This property determines which icon should be used. The property should match an icon name such as `checkmark`.
label	string		This property shows the text to be displayed in badge.
light	boolean	false	This boolean shows the determines whether to use the light or dark theme.
size	"lg" \| "md" \| "sm" \| "xs"	"md"	This property shows the size of badge.

Name	Returns	Docs
hide	Promise will resolve after badge is hidden.	This public method is used to hide a badge.
show	Promise will resolve after badge is shown.	This public method is used to show a badge.

Event	Detail	Docs
somDismissed	void	This event is emitted when the badge is dismissed.

Name	Docs
label	This part is the badge label.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.