Button
The one component everything else borrows from. Pass `href` and it renders an `<a>` with the same look, which saves wrapping buttons in links and getting the keyboard behaviour wrong.
import
import { Button } from '@joshicodes/cock';Variants
Six ways to get pushed.
Sizes
Three text sizes and two icon-only sizes.
Loading and disabled
While loading the button is disabled, so a second submit cannot slip through.
As a link
With href it renders an <a>, so middle-click and "open in new tab" work.
Behaviour
- `loading` disables the button and shows a spinner, so a double submit is not possible while a request is in flight.
- With `href` the component renders an `<a>`; `disabled` then becomes `aria-disabled` plus `tabindex="-1"`, because a link cannot be disabled.
- Every other attribute is forwarded, so `type="submit"`, `form` and `onclick` work as usual.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Button
| Prop | Type | Default |
|---|---|---|
variant | ButtonVariant | 'solid' |
size | ButtonSize | 'md' |
href Render as an `<a>` instead of a `<button>`. | string | — |
target | string | — |
rel | string | — |
loading | boolean | false |
block Stretch to the full width of the parent. | boolean | false |
class | string | — |
Anything else is forwarded to the underlying element, typed as HTMLButtonAttributes.
Snippets of Button
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |