Button

Six variants, seven sizes. Use render to polymorph into links.

Installation

npx @noarka/cli add button

tsx

import { Button } from "@noarka/ui";

tsx

<Button>Save changes</Button>

Variants

Six visual styles for different emphasis.

Sizes

Small to large text sizes plus an icon-only button.

As a link

Use render to polymorph into an anchor while keeping button styles.

Icon buttons

Icon-only sizes for compact actions. Always label them for assistive tech.

Disabled

Disabled buttons ignore pointer events and render at half opacity.

Button

Prop	Type	Default
`variant` Visual style.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size` Size. Icon sizes render square hit areas for icon-only buttons.	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`render` Polymorphic render prop. Use to render an anchor or Next.js Link with button styles.	`ReactElement \| ((props) => ReactNode)`	`-`
`nativeButton` Set explicitly to override the automatic inference. Inferred from the render element unless told otherwise.	`boolean`	`-`
`disabled` Disable interaction. Renders at half opacity with no pointer events.	`boolean`	`false`
`className` Additional classes merged with the variant styles.	`string`	`-`