On this page
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@latest@ninna-ui/core. CSS setup required.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)