Button

The ZButton component is used for triggering actions. It supports multiple variants, sizes, loading states, and can render as different elements.

Import

import { ZButton } from "@zurto/ui";

Basic Usage

ZButton

1

<ZButton>Click me</ZButton>

Variants

ZButton comes with 5 built-in variants to match different use cases.

ZButton

12345

<ZButton variant='primary'>Primary</ZButton>
<ZButton variant='secondary'>Secondary</ZButton>
<ZButton variant='ghost'>Ghost</ZButton>
<ZButton variant='danger'>Danger</ZButton>
<ZButton variant='outline'>Outline</ZButton>

Sizes

Three sizes are available: sm, md (default), and lg.

ZButton

123

<ZButton size='sm'>Small</ZButton>
<ZButton size='md'>Medium</ZButton>
<ZButton size='lg'>Large</ZButton>

Loading State

Show a loading spinner while an action is in progress.

ZButton

12

<ZButton loading>Processing...</ZButton>
<ZButton loading variant='secondary'>Saving</ZButton>

Disabled State

Disable interaction with the button.

ZButton

12

<ZButton disabled>Disabled</ZButton>
<ZButton disabled variant='outline'>Can't click</ZButton>

With Icons

Add icons before or after the button text using leftIcon and rightIcon props.

ZButton

1234

import { Plus, ArrowRight, Download } from 'lucide-react'
<ZButton leftIcon={<Plus />}>Add Item</ZButton>
<ZButton rightIcon={<ArrowRight />}>Continue</ZButton>
<ZButton leftIcon={<Download />} variant='secondary'>Download</ZButton>

Icon Only

Create icon-only buttons with proper accessibility.

ZButton

123456

<ZButton aria-label='Settings' size='sm'>
  <SettingsIcon />
</ZButton>
<ZButton aria-label='Delete' variant='danger'>
  <TrashIcon />
</ZButton>

Full Width

Make the button take the full width of its container.

ZButton

1

<ZButton fullWidth>Full Width Button</ZButton>

As Link

Render the button as an anchor element while keeping button styles.

ZButton

Go to Dashboard

123

<ZButton as='a' href='/dashboard'>
  Go to Dashboard
</ZButton>

Button Group

Combine multiple buttons in a group.

ZButtonGroupZButton

12345

<ZButtonGroup>
  <ZButton>Left</ZButton>
  <ZButton>Center</ZButton>
  <ZButton>Right</ZButton>
</ZButtonGroup>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost' | 'danger' | 'outline'	'primary'	Visual style of the button
size	'sm' | 'md' | 'lg'	'md'	Size of the button
loading	boolean	false	Show loading spinner and disable interaction
disabled	boolean	false	Disable the button
leftIcon	ReactNode	–	Icon to display before the button text
rightIcon	ReactNode	–	Icon to display after the button text
fullWidth	boolean	false	Make button take full container width
as	ElementType	'button'	Render as a different element (e.g., anchor)
childrenRequired	ReactNode	–	Button content

Accessibility

• Uses native <button> element with proper semantics
• aria-disabled is applied when disabled
• aria-busy is applied when loading
• Focus ring visible for keyboard navigation
• Use aria-label for icon-only buttons

Keyboard Support

Key	Action
Enter	Activates the button
Space	Activates the button
Tab	Moves focus to/from the button