Preview
Props
Secondary
Icon Button
Override the pill shape, padding, and min-width via className for a compact square icon button.
Install
npx shadcn@latest add @evilbuttons/aqua-buttonUsage
import { AquaButton } from "@/components/evil-buttons/aqua-button";
export function ButtonDemo() {
return (
<div className="flex gap-4">
<AquaButton variant="secondary">Cancel</AquaButton>
<AquaButton>Save</AquaButton>
</div>
);
}
export function IconButtonDemo() {
return (
<AquaButton
aria-label="Show menu"
className="h-9 w-9 min-w-0 rounded-md px-0"
>
<svg width="11" height="11" viewBox="0 0 10 10" aria-hidden="true">
<path d="M1 3 L9 3 L5 8 Z" fill="currentColor" />
</svg>
</AquaButton>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "primary" | Blue Aqua gel or adaptive silver/dark glass. |
className | string | - | Extra classes passed to the wrapper. |
children | React.ReactNode | - | The visible button label or content. |
All other <button> attributes (onClick, disabled, type, etc.) are forwarded.
Good to know
- Scales with
font-size: everything is inem.