Badge

Who doesn't love a good notification? Our Badge is a small but mighty attention-grabber

Example

XS Size

SM Size

MD Size

Large size

1  import { Badge, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' justify='center'>
4    <Badge size='xs'>XS Size</Badge>
5    <Badge>SM Size</Badge>
6    <Badge size='md'>MD Size</Badge>
7    <Badge size='lg'>Large size</Badge>
8  </FlexBox>
9

API Reference

Component	Description
Badge	The spotlight announcer. A compact component that highlights status, notifications, or labels, adding context to your UI elements.

Component Properties

Badge

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Badge.
`color`	`string`	default	The color of the Badge.
`interactive`	`boolean`	false	Make the Badge interactive, with hover and focus states.
`block`	`boolean`	false	Make the Badge a block element, filling the width of its parent.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius