Badge

Badge is used to display status or count markers, typically attached to other components like buttons or avatars, for instance, unread message counts or user levels.

Basic

Sizes

Badges in different sizes for labeling or status display.

Colors

Multi-colored badges for categorization or status indication.

Rounded Style

Rounded-style badges for a softer appearance.

Bordered Style

Bordered badge component for added dimension.

With Icon

Badge with icon for enhanced visual information.

With Indicator

Badge with indicator commonly used for status indication.

Icon Only

Icon-only badge for simplified display needs.

Animation

Shake Animation

Badge with shake animation to attract user attention.

Code snippet not found, please check if the component name is correct

Ping Animation

Badge with ping animation effect to attract user attention.

Code snippet not found, please check if the component name is correct

Bounce Animation

Badge with bounce animation for added visual dynamics.

Code snippet not found, please check if the component name is correct

Scene

Status Icons

Badge containing status icons for different states.

Code snippet not found, please check if the component name is correct

With Dismiss

Dismissible badge allowing manual removal.

Code snippet not found, please check if the component name is correct

With Avatar

Badge with avatar suitable for user-related notifications.

Code snippet not found, please check if the component name is correct

With Time

Time-displaying badge for timestamps or logging.

Code snippet not found, please check if the component name is correct

With Update Label

Badge with "update" label for version or content change notifications.

Code snippet not found, please check if the component name is correct