Lenso UI

Foundation component · Actions

Icon Button

Use a familiar icon for a compact action while preserving a reliable interaction target.

Live playground

Choose Icon Button when

  • The action is common, its icon is widely understood, and nearby text supplies context.
  • Use Button when the label carries meaning or the action needs stronger emphasis.
  • Keep the icon visually smaller than its interaction target.

Naming and feedback

  • Always provide an accessible name with aria-label.
  • Use selected state only for a persistent toggle; use pressed feedback for ordinary actions.
  • Add a Tooltip when the icon may be unfamiliar, but do not use it as the accessible name.

Implementation

The component keeps icon alignment and target size stable across visual variants.

import { IconButton } from "@lenso/ui/icon-button";
import { PlusIcon } from "lucide-react";

<IconButton aria-label="Create issue">
  <PlusIcon />
</IconButton>;
Lenso UI