ZButton

Primary button component with variants and sizes

Example

button-variants demo

Import

import { ZButton } from "zurto-ui";

Usage

import { ZButton } from "zurto-ui";

function Example() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <ZButton variant="primary">Primary</ZButton>
      <ZButton variant="secondary">Secondary</ZButton>
      <ZButton variant="ghost">Ghost</ZButton>
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ------------ | ----------- | -------------------- | --------- | ----------- | -------------------- | | variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Button style variant | | size | 'sm' | 'md' | 'lg' | 'md' | Button size | | disabled | boolean | false | Disable the button | | loading | boolean | false | Show loading spinner | | leftIcon | ReactNode | - | Icon before text | | rightIcon | ReactNode | - | Icon after text | | onClick | () => void | - | Click handler |

Accessibility

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