Button

Usage

import { Button } from '@zalify-ui/react'

<Button>Click me</Button>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change the appearance of the button.

Icon

Use icons within a button

Colors

Use the colorPalette prop to change the appearance of the button.

Disabled

Use the disabled prop to disable the button.

Loading

Pass the loading and loadingText props to the button to show a loading spinner and add a loading text.

Button Group

Use the ButtonGroup component to group buttons together. This component allows you pass common recipe properties to inner buttons.

To create an attached button group, pass the attached prop to the ButtonGroup component.

As Link

Use the asChild prop to render a button as a link.

Ref

Here's how to access the underlying element reference

'use client'
import { useRef } from 'react'
import { Button } from '@zalify-ui/react'

export const App = () => {
  const ref = useRef<HTMLButtonElement>(null)
  return <Button ref={ref}>Click me</Button>
}

Props