mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
27 lines
683 B
Plaintext
27 lines
683 B
Plaintext
import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
|
|
import * as BadgeStories from './badge.stories';
|
|
|
|
<Meta of={BadgeStories} />
|
|
|
|
# Badge
|
|
|
|
The badge component is a versatile component that can be used to display various types of information.
|
|
Use `closable` to render a trailing close button that hides the badge after close unless `onClose` prevents default.
|
|
|
|
## How to use
|
|
|
|
```tsx
|
|
import { Badge } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
// the default badge is variant default with color primary
|
|
return <Badge>Hello</Badge>;
|
|
}
|
|
```
|
|
|
|
This code above will render the following badge:
|
|
|
|
<Primary />
|
|
|
|
<Controls of={BadgeStories.Playground} />
|