laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
119 lines (90 loc) • 4.77 kB
Markdown
# Badge
## Overview
Small, inline label for status and metadata. Supports many visual variants, optional icons, link mode, and disabled state.
---
## Props
### Badge (Root)
| Prop | Type | Default | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------- |
| `variant` | `"default" \| "destructive" \| "warning" \| "success" \| "outline" \| "outline-primary" \| "outline-destructive" \| "outline-warning" \| "outline-success" \| "secondary" \| "ghost" \| "ghost-destructive" \| "ghost-accent" \| "ghost-warning" \| "ghost-success" \| "link"` | `"default"` | Visual style of the badge. |
| `asChild` | `boolean` | `false` | Renders the badge as its child element. |
| `disabled` | `boolean` | `false` | Disables interactions and dims the badge. |
| `iconLeft` | `IconName` | `undefined` | Optional left icon (uses `Icon` component). |
| `iconRight` | `IconName` | `undefined` | Optional right icon (uses `Icon` component).|
| `className` | `string` | `""` | Additional classes on the root element. |
| `children` | `React.ReactNode` | **required** | Text or content inside the badge. |
---
## Behavior
- **Variants**: Outline, ghost, and semantic variants available for flexible UIs.
- **As child**: Use `asChild` to render as an anchor or any custom element.
- **Icons**: `iconLeft`/`iconRight` render `Icon` with appropriate sizes.
- **Disabled**: Applies `cursor-not-allowed` and reduces opacity.
---
## Examples
### Default
```tsx
import { Badge } from "laif-ds";
export function DefaultBadge() {
return <Badge>Badge</Badge>;
}
```
### Variants Grid
```tsx
import { Badge, type BadgeProps } from "laif-ds";
const variants: BadgeProps["variant"][] = [
"default",
"destructive",
"warning",
"success",
"outline",
"outline-primary",
"outline-destructive",
"outline-warning",
"outline-success",
"secondary",
"ghost",
"ghost-accent",
"ghost-destructive",
"ghost-warning",
"ghost-success",
"link",
];
export function VariantsShowcase() {
return (
<div className="flex flex-wrap gap-2">
{variants.map((v) => (
<Badge key={v} variant={v}>
{v}
</Badge>
))}
</div>
);
}
```
### With Icons
```tsx
import { Badge } from "laif-ds";
export function WithIcons() {
return (
<div className="flex gap-2">
<Badge iconLeft="Check" iconRight="X">Approved</Badge>
<Badge variant="outline-primary" iconLeft="Pencil">Edit</Badge>
</div>
);
}
```
### As Link (asChild)
```tsx
import { Badge } from "laif-ds";
export function LinkBadge() {
return (
<Badge asChild>
<a href="#" className="cursor-pointer">Clickable Badge</a>
</Badge>
);
}
```
---
## Notes
- **Icons**: Use `IconName` values supported by the design system.
- **AsChild**: Useful to keep semantics (e.g., anchors) while styling as badges.