components / button
button.
polymorphic button with five variants, optional icons, hover tooltip, and click-to-clipboard. renders as an anchor when given href.
installation
bunx @justin06lee/chrome@latest add buttonprops
| name | type | default | description |
|---|---|---|---|
| variant | 'solid' | 'outline' | 'dashed' | 'ghost' | 'link' | 'outline' | |
| size | 'sm' | 'md' | 'md' | |
| icon | LucideIcon | - | lucide icon before text (or alone if no children). |
| iconRight | LucideIcon | - | lucide icon after text. |
| tooltip | string | - | white slide-up pill shown on hover. |
| label | string | - | aria-label override; required for icon-only buttons. |
| href | string | - | renders as <a>. external URLs (http(s)://) get target="_blank" auto-applied. |
| linkComponent | React.ElementType | - | anchor component for internal hrefs — pass your router's Link (e.g. next/link) for client-side navigation + prefetch. external http(s) hrefs always use a plain <a>. |
| prefetch | boolean | - | forwarded to linkComponent (e.g. next/link's prefetch) when set. |
| onClick | () => void | - | |
| fullWidth | boolean | false | |
| disabled | boolean | false | |
| copy | string | - | click copies this to the clipboard. tooltip + text children swap to copyFeedback for 1.5s. |
| copyFeedback | string | 'Copied!' | |
| background | string | - | CSS background applied to the root element. transparent by default. |