ZIconButton

Icon-only button for toolbars and actions

Example

button-icon demo

Import

import { ZIconButton } from "zurto-ui";

Usage

import { ZIconButton } from "zurto-ui";
import { Settings, Bell, Zap } from "lucide-react";

function Example() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <ZIconButton icon={<Zap />} variant="primary" />
      <ZIconButton icon={<Settings />} variant="outline" />
      <ZIconButton icon={<Bell />} variant="ghost" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------ | ----------- | --------- | ------------------------------ | ----------- | -------------- | | icon | ReactNode | - | Icon element (required) | | variant | 'primary' | 'outline' | 'ghost' | 'primary' | Button variant | | size | 'sm' | 'md' | 'lg' | 'md' | Button size | | aria-label | string | - | Accessibility label (required) |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management