ButtonsNew
Texture Button
A button with a layered border and a soft gradient that feels like a real key. Comes in primary, secondary, minimal and icon variants.
Customize
color
secondaryColor
highlightColor
Based on Texture Button (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'accent' | 'destructive' | 'minimal' | 'icon' | "primary" | Button style. |
| size | 'default' | 'sm' | 'lg' | 'icon' | "default" | Button size. |
| asChild | boolean | false | Pass the styles to the child element, e.g. a link. |
| children | ReactNode | — | Button text and icons. |
| className | string | — | Extra classes. |
| color | string | "#f5f5f5" | Surface color of the button. Text turns dark or white on its own. |
| secondaryColor | string | "#d4d4d4" | Lower color of the gradient and the rim tint. |
| highlightColor | string | "rgba(255,255,255,0.8)" | Thin sheen along the top edge. |
Dependencies
4 required packages
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge