Button

import { Mail } from 'lucide-react'
import { Button } from 'ui'
 
export function ButtonDemo() {
  return (
    <div className="flex gap-3">
      <Button type="primary">Button rest</Button>
      <Button type="primary" loading>
        Button loading
      </Button>
      <Button type="primary" icon={<Mail />}>
        Button icon
      </Button>
      <Button type="primary" iconRight={<Mail />}>
        Button iconRight
      </Button>
    </div>
  )
}

Usage

import { Button } from '@/components/ui/button'

<Button type="outline">Button</Button>

It is likely that the type prop will be changed to variant in the future.

Link

You can use the buttonVariants helper to create a link that looks like a button.

import { buttonVariants } from '@/components/ui/button'

<Link className={buttonVariants({ variant: 'outline' })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Examples

Sizes

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

Types

These are all the different type variations.

Primary

Used for data insertion actions, confirming purchases, strong positive actions.

Default

Used for opening dialogs, navigating to pages, and other non CRUD actions.

This type will probably be the most used button type. It will probably be changed to be the default type in future.

Secondary

Can be used for signaling a data or config change, but not as serious as a primary button. For destructive or side effect actions, use the destructive or warning type.

Warning

Used for actions that might have a side effect, but not as serious as a destructive action.

Destructive (currently danger)

Used for actions that will have a serious destructive side effect, like deleting data.

prop type will probably be changed to destructive in the future.

Outline

Used for secondary actions, or actions that are not as important as the primary action.

Ghost (currently text)

Used for actions that are not as important as the primary action, or for actions that are not as important as the primary action.

prop type will probably be changed to ghost in the future.

Link

Used for actions that are not as important as the primary action, or for actions that are not as important as the primary action.

Only an Icon

Displaying only an Icon in a button.

As Child

Supports slot behavior with asChild prop.

Accessibility

Keyboard focus is automatically handled:

• Enabled buttons default to tabIndex={0} (keyboard accessible)
• Disabled buttons default to tabIndex={-1} (removed from tab order)
• You can still override with an explicit tabIndex prop when needed

You therefore don't need to manually set tabIndex, as Button handles it automatically based on its disabled state.