IconButton

IconButton is a button component designed for icon-only actions. It requires an aria-label for accessibility and supports all the same variants, colors, and sizes as the regular Button component.

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

pnpm add @ninna-ui/primitives

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

View source

Usage

Import and use the IconButton component in your application. Always provide an aria-label for accessibility.

import { IconButton } from "@ninna-ui/primitives";
import { Heart } from "lucide-react";

export default function Example() {
  return (
    <IconButton
      icon={<Heart />}
      color="primary"
      aria-label="Like"
    />
  );
}

Solid

Filled icon buttons with solid background colors.

Soft

Icon buttons with light tinted backgrounds and colored icons.

Outline

Icon buttons with transparent background and colored border.

Ghost

Icon buttons with no background and subtle hover effect.

Sizes

Icon buttons in different sizes from xs to xl. All sizes maintain square dimensions.

Radius

Different border radius options. Use 'full' for circular buttons.

none

full

Loading State

Icon buttons with loading spinner. The icon is replaced with a spinner during loading.

Loading state with different variants

Loading state with different sizes

Loading state with different colors

Disabled State

Disabled icon buttons in different variants.

Disabled solid variants

Disabled soft variants

Disabled outline variants

Disabled ghost variants

Use Cases

Real-world examples of IconButton usage in different contexts.

Social Actions

Navigation Controls

Page 1 of 10

Modal Header

Dialog Title

Toolbar

Theme Toggle

Copy to Clipboard

npm install @ninna-ui/primitives

CRUD Actions

Floating Action Button

API Reference

Complete list of props for the IconButton component.

Props

Prop	Type	Default	Description
`icon*`	`React.ReactNode`	-	The icon to display in the button
`aria-label*`	`string`	-	Accessible label for the button (required for screen readers)
`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 (square dimensions)
`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
`className`	`string`	-	Additional CSS classes

Accessibility

aria-label is required: Since IconButton has no visible text, an aria-label must be provided for screen readers
IconButton has proper focus states with visible outlines
Disabled buttons are not focusable and have aria-disabled attribute
Loading buttons are disabled and announce loading state via aria-busy
Icons are marked with aria-hidden to prevent duplicate announcements
Keyboard navigation is fully supported (Enter and Space keys)
The button element has type="button" by default to prevent form submission