Button

Button is a beautiful component that comes in several sizes and colors.

Code Example

<Button neutral> Click Me </Button>

Components

Button is a standalone component.

Button

The Button component's styles and behavior can be customized with following props:

Prop	Type	Description
`is`	string	Allows changing the element tag.
`type`	string	Sets the `type` attribute. Can be `button`, `submit` or `reset`
`join`	boolean	Use inside Join to group items together.
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`ghost`	boolean	Enables the ghost style on the button
`link`	boolean	Enables the link style on the button.
`glass`	boolean	Enables the glass style on the button
`outline`	boolean	Enables the outline style on the button
`active`	boolean	Enables the active style on the button.
`disabled`	boolean	Disables the button both visually and functionally.
`loading`	boolean	Styles the button with a loading indicator
`shape`	string	Sets the button shape to one of the below prop names.
`circle`	boolean	Sets the button shape to circle
`square`	boolean	Sets the button shape to square
`wide`	boolean	Sets the button shape to wide
`block`	boolean	Sets the button shape to block
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

Set the color of the button using one of the color props.

Code Example

<Button primary> Primary </Button>

Outline

Use the outline prop to change the look of the button.

Code Example

<Button primary outline> Primary </Button>

Ghost

Use the ghost prop to make the button look invisible until hovered over. The ghost style does not have color variant props.

Code Example

<Button ghost> Hover Me </Button>

Ghost Text Color

Create colorful ghost buttons using text-${color} classes:

Code Example

<Button ghost class="text-primary">
  Primary
</Button>

Ghost Background Color

Create colorful ghost backgrounds by setting hover:bg-${color} and hover:text-${color}-content classes on the button.

Code Example

<Button ghost class="hover:bg-primary hover:text-primary-content">
  Primary
</Button>

Link

Use the link to give the button a text-only appearance. Using a color prop with link will style the text color instead of the background color.

Code Example

<Button link primary> Primary Link </Button>

Glass

Use the link to give the button a text-only appearance. The link style does not have color variant props.

Code Example

<Card class="p-20 bg-cover" style="background-image:url(https://picsum.photos/id/314/400/300)">
  <Button glass>
    Glass Button
  </Button>
</Card>

Size

Use one of the size props to set the size of the button:

Code Example

<Button xs> Click Me </Button>

Shape

Use one of the shape props to set the shape of the button to circle, square, wide, or block.

Code Example

<Button circle> <Icon name="feather:x" /> </Button>

Circle

Code Example

<Button circle> <Icon name="feather:x" /> </Button>

Square

Code Example

<Button square> <Icon name="feather:x" /> </Button>

Wide

Code Example

<Button wide> Wide Button </Button>

Block

Block buttons are full width.

Code Example

<Button block> Block Button </Button>

Icon Buttons

The default styles put icons and text next to each other in a row. This example uses the NuxtIcon plugin for the icon component.

Code Example

<Button neutral>
  <Icon name="feather:inbox" class="mr-2" />Check Mail
</Button>

Button States

Active

Use the active prop to show the button's active style. Note that buttons indicating UI state (info, success, warning, and error) as well as glass and outline buttons do not have active states.

Normal State

Active State

Code Example

<Button active> Active </Button>

Disabled

Use the disabled prop to disable the button.

Code Example

<Button disabled> Disabled </Button>

Loading

You can show loading indicators using the new Loading component inside of buttons. The Loading element must be manually sized to fit.

Note: In DaisyUI v3, the Button component no longer has a loading prop. To achieve the same effect as in previous versions, use the no-animation prop with a Loading element of your choice inside.

Code Example

<Button no-animation>
  <LoadingSpinner />
</Button>

No Animation

Use the no-animation prop to disable click animation.

Code Example

<Button no-animation> No Animation </Button>

Prev Changelog

Next Dropdown