/ux
Components/Buttons/ActionIcon

ActionIcon

Buttons

Square icon-only button with the same variants as Button.

Use for toolbar actions, table row controls, or any context where a text label is redundant. aria-label is required — there is no visible text.

Usage

import { ActionIcon } from "nosible-ux"
import { Plus } from "lucide-react"

export default function Example() {
  return (
    <ActionIcon aria-label="Add signal">
      <Plus size={16} />
    </ActionIcon>
  )
}

Examples

Variants

Sizes

Loading and critical color

Accessibility

aria-label is required. The loading spinner carries role="status" from the internal Loader. Focus ring uses Neo Green.

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label required when the icon has no surrounding text.
asChild
boolean | undefinedfalseWhen true, renders the child element as the root.
color
"default" | "critical" | null | undefined—
loading
boolean | undefinedfalseWhen true, shows a Loader spinner and disables interaction.
size
"xs" | "sm" | "md" | "lg" | "xl" | null | undefined—
variant
"default" | "ghost" | "filled" | "outline" | "subtle" | "transparent" | null | undefined—
← All ComponentsGetting Started →