Badge

Usage

Code Editor
Copy
import { Badge } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { BadgeThemeProps, BadgeSizeProps, BadgeShapeProps } from '@erudilabs/alma'

BadgeShapeProps = 'circle' | 'square'

BadgeThemeProps = 'default' | 'primary' | 'danger' | 'success' | 'warning'

BadgeSizeProps = 'small' | 'medium' | 'large'

Component

Here preview and detail explain of Avatar component

Default

Code Editor
Copy
<Badge>Default</Badge>

Theme

These themes allow you to apply different visual styles to the badge, Whether it's indicating different statuses, categories, or providing visual cues, the ability to customize badge themes adds flexibility and enhances the visual appeal of your UI components.

Primary

Code Editor
Copy
<Badge theme="primary">Primary</Badge>

Danger

Code Editor
Copy
<Badge theme="danger">Danger</Badge>

Warning

Code Editor
Copy
<Badge theme="warning">Warning</Badge>

Success

Code Editor
Copy
<Badge theme="success">Success</Badge>

Size

Prop determines the dimensions of the badge, affecting its width, height, and padding. You can define different sizes

Small

Code Editor
Copy
<Badge theme="primary" size="small">Small</Badge>

Medium

Code Editor
Copy
<Badge theme="primary" size="medium">Medium</Badge>

Large

Code Editor
Copy
<Badge theme="primary" size="large">Large</Badge>

Shape

Prop allows you to specify the shape of the badge. It can be set as circle for a circular badge or rounded for a badge with rounded corners.

Circle

Code Editor
Copy
<Badge theme="warning" shape="circle">Circle</Badge>

Square

Code Editor
Copy
<Badge theme="warning" shape="square">Square</Badge>

Props Reference