IconButton

IconButton defines how EnterUI handles an accessible icon-only action with refined size, variant, and loading states, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-row">
  <IconButton aria-label="Open menu">M</IconButton>
  <IconButton aria-label="Refresh" variant="primary">R</IconButton>
  <IconButton aria-label="Archive" variant="ghost">A</IconButton>
  <IconButton aria-label="Delete" variant="danger">D</IconButton>
  <IconButton aria-label="Loading" loading>…</IconButton>
</div>

#Import

import { IconButton } from "@froggdesign/enter-ui-react";

#Accessibility

IconButton renders a native button. Provide aria-label, aria-labelledby, or title. Loading state keeps the button size stable and disables interaction.

#API

• variant: primary, secondary, ghost, or danger.
• size: sm, md, or lg.
• loading disables the button and shows an in-place spinner.
• Includes native button props and className.

#Styling

Uses .eui-icon-button classes and EnterUI color, shadow, radius, and focus variables.