Diamond
Diamond-shaped container using CSS clip-path with four size presets.
Preview
Import
import { Diamond } from "@sigil-ui/components";Usage
<Diamond>
<span className="text-xs">Icon</span>
</Diamond>Sizes
<Diamond size="sm">S</Diamond>
<Diamond size="md">M</Diamond>
<Diamond size="lg">L</Diamond>
<Diamond size="xl">XL</Diamond>As an avatar frame
<Diamond size="lg">
<img src="/avatar.jpg" alt="User" className="w-full h-full object-cover" />
</Diamond>Styled
<Diamond size="lg" className="bg-[var(--s-primary)] text-white font-bold">
OK
</Diamond>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | "md" | Diamond size (64/96/128/192 px) |
children | ReactNode | — | Content centered inside the diamond |
className | string | — | Additional CSS classes |