Button

Buttons allow users to take actions and make choices with a single tap. They communicate actions that users can take.

import { Button } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Button component in your application.

import { Button } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Button color="primary">
      Click me
    </Button>
  );
}

Solid

Filled buttons with solid background colors.

Soft

Buttons with light tinted backgrounds and colored text.

Outline

Buttons with transparent background and colored border.

Ghost

Buttons with no background and subtle hover effect.

Text

Text-only buttons with underline on hover.

Sizes

Buttons in different sizes from xs to xl.

Radius

Different border radius options.

With Icons

Buttons with left and right icons.

With Badge

Buttons with notification badges.

Loading State

Buttons with loading spinner.

Disabled State

Disabled buttons in different variants.

Actions

Buttons with onClick handlers and links.

Custom Styles

Custom styled buttons with unique effects.

Custom Soft Variants

Soft variants with custom colors and dark mode support

Custom Outline Variants

Outline variants with custom border colors

Gradient Buttons

Use Tailwind gradient utilities for eye-catching buttons

API Reference

Complete list of props for the Button component.

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'text'`	`'solid'`	Visual style variant of the button
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the button
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the button
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Border radius of the button
`loading`	`boolean`	`false`	Shows loading spinner and disables the button
`disabled`	`boolean`	`false`	Disables the button
`fullWidth`	`boolean`	`false`	Makes the button full width
`leftIcon`	`React.ReactNode`	-	Icon to display on the left side
`rightIcon`	`React.ReactNode`	-	Icon to display on the right side
`className`	`string`	-	Additional CSS classes
`children*`	`React.ReactNode`	-	Button content

Accessibility

Buttons have proper focus states with visible outlines
Disabled buttons are not focusable and have aria-disabled attribute
Loading buttons are disabled and announce loading state to screen readers
Icon-only buttons should include aria-label for accessibility
Keyboard navigation is fully supported (Enter and Space keys)