Button

Six variants from default to link at four heights, each with a square size for a lone glyph, and padding that tightens on the side an icon sits.

01Preview

npx shadcn@latest add https://aiellie.app/r/button.json

A button component that can be used to trigger actions. Renders a <button> element.

Prop	Type	Default	Description
focusableWhenDisabled	boolean	false	Whether the button should be focusable when disabled.
nativeButton	boolean	true	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
className	string \| ((state: Button.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Button.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Button.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Attribute	Type	Description
data-disabled	-	Present when the button is disabled.