Badge

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

Example

XS SizeSM SizeMD SizeLarge size

1  import { Badge, Flex } from '@haktos/sugarcoat-ui';
2
3  <Flex gap='3' justify='center'>
4    <Badge size='xs'>XS Size</Badge>
5    <Badge size='sm'>SM Size</Badge>
6    <Badges>MD Size</Badges>
7    <Badge size='lg'>Large size</Badge>
8  </Flex>
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.