Button

free

Button gives product actions a consistent hierarchy across forms, dialogs, and toolbars.

import Button from '@/components/ui/button';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Button

pnpm dlx nateui@latest add Button

yarn dlx nateui@latest add Button

Examples

Variants

import Button from '@/components/ui/button';

export default function VariantDemo() {
  return (

Sizes

import Button from '@/components/ui/button';

export default function SizeDemo() {
  return (

Shapes

import { PiPlus } from 'react-icons/pi'
import Button from '@/components/ui/button';

export default function ShapeDemo() {

States

import Button from '@/components/ui/button';

export default function StatesDemo() {
  return (

Destructive

import Button from '@/components/ui/button';

export default function DestructiveDemo() {
  return (

Icons

import { PiArrowRight, PiEnvelope, PiPlus } from 'react-icons/pi'
import Button from '@/components/ui/button';

export default function IconDemo() {

Block

import Button from '@/components/ui/button';

export default function BlockDemo() {
  return (

API

Button accepts the props below plus native props for the rendered element.

Prop	Description	Type	Default
`asElement`	Root element or component rendered by the button.	`ElementType`	`'button'`
`active`	Marks the button as active and applies the active visual state.	`boolean`	`false`
`block`	Expands the button to the full width of its container.	`boolean`	`false`
`children`	Button label or content.	`ReactNode`	-
`className`	Static class string or state-aware class callback.	`ButtonClassName`	-
`clickFeedback`	Enables the press-down transform feedback on activation.	`boolean`	`true`
`destructive`	Switches the button into the destructive intent palette.	`boolean`	`false`
`disabled`	Prevents interaction and applies the disabled visual state.	`boolean`	`false`
`icon`	Icon content rendered with, or instead of, the label.	`string \| ReactNode`	-
`iconAlignment`	Icon placement when both icon and label are present.	`ButtonIconAlignment`	`'start'`
`loading`	Shows a spinner and prevents repeat activation.	`boolean`	`false`
`onClick`	Click handler invoked only when the button is not disabled or loading.	`ButtonClickHandler`	-
`ref`	Ref forwarded to the underlying button element.	`Ref<HTMLButtonElement>`	-
`shape`	Border radius treatment.	`ButtonShape`	`'round'`
`size`	Control size. Falls back to InputGroup size, then ConfigProvider control size.	`ControlSize`	`'md'` from ConfigProvider
`variant`	Visual style.	`ButtonVariant`	`'default'`
`...nativeProps`	Native props for the rendered element, excluding Button-owned props.	`NativeButtonProps<E>`	-

Types

type ButtonVariant = 'solid' | 'subtle' | 'default' | 'ghost' | 'link';
type ControlSize = 'sm' | 'md' | 'lg';
type ButtonShape = 'round' | 'circle' | 'none';
type ButtonIconAlignment = 'start' | 'end';
type ButtonClickHandler = (event: MouseEvent<HTMLButtonElement>) => void;
 
type ButtonClassName =
  | string
  | ((state: {
      active: boolean;
      destructive: boolean;
      unclickable: boolean;
    }) => string);
 
type NativeButtonProps<E extends ElementType> = Omit<
  ComponentPropsWithoutRef<E>,
  | 'asElement'
  | 'active'
  | 'block'
  | 'className'
  | 'clickFeedback'
  | 'destructive'
  | 'disabled'
  | 'icon'
  | 'iconAlignment'
  | 'loading'
  | 'onClick'
  | 'ref'
  | 'shape'
  | 'size'
  | 'variant'
>;