Button

Polymorphic button with size and variant props.

import { Button } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<Button variant="secondary">Secondary</Button>

<Button variant="ghost">Ghost</Button>

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'outline' \| 'link'`	`'primary'`	Visual style variant. Affects background, border, and text color.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant. Controls padding and font size.
`loading`	`boolean`	`false`	Show loading spinner and disable interaction.
`disabled`	`boolean`	`false`	Disable button interaction.
`fullWidth`	`boolean`	`false`	Expand button to full width of container.
`rounded`	`boolean`	`false`	Apply pill shape with fully rounded corners (border-radius: 9999px).
`as`	`string`	`KobalteButton`	HTML element to render as (e.g., 'a', 'button').
`unstyled`	`boolean`	`false`	Remove all default styles, only apply classNames.
`classNames`	`{ /** Class for root button element. / root?: string; /* Class for loading spinner element. */ spinner?: string; }`	—	Custom class names for sub-elements.
`class`	`string`	—	Additional CSS class for root element.
`style`	`JSX.CSSProperties`	—	Inline styles for root element.
`children` *	`JSX.Element`	—	Button content.
`onClick`	`(e: MouseEvent) => void`	—	Click event handler.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Button type attribute.
`tooltip`	`string`	—	Tooltip content. When provided, the button is wrapped in a Tooltip primitive with this content. When omitted, the button renders without any tooltip wrapper.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.