IconButton

Actions

A compact icon-only button with an accessible label.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { IconButton } from "@nphuonha/ui-kit";
import { CopyIcon, HeartIcon, MagnifyingGlassIcon, ShareIcon } from "@phosphor-icons/react";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<IconButton aria-label="Search" variant="secondary">
  <MagnifyingGlassIcon size={18} />
</IconButton>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
aria-label	string	—	Required accessible name for the action.
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "soft" \| "danger"	"primary"	Visual emphasis.
size	"icon" \| "icon-sm"	"icon"	Square control size.
shape	"rounded" \| "pill"	"rounded"	Corner treatment.
disabled	boolean	—	Disables the button.