Button
The Button component takes the standard button attributes and adds Daisy UI classes to it based on the props passed to it. The props are:
- color: The color of the button.
- style: The style of the button.
- size: The size of the button.
- modifier: The modifier of the button.
Button
Section titled “Button”---import type { HTMLAttributes } from 'astro/types';import { tv, type VariantProps } from 'tailwind-variants';
interface Props extends Omit< HTMLAttributes<'button'>, 'color' | 'style' | 'size' | 'modifier' >, Omit<HTMLAttributes<'a'>, 'type' | 'color' | 'style' | 'size' | 'modifier'>, VariantProps<typeof button> {}
const { color, style, size, modifier, class: className, href, ...rest} = Astro.props;
export const button = tv({ base: 'btn', variants: { color: { neutral: 'btn-neutral', primary: 'btn-primary', secondary: 'btn-secondary', info: 'btn-info', success: 'btn-success', warning: 'btn-warning', error: 'btn-error', accent: 'btn-accent', }, style: { outline: 'btn-outline', dash: 'btn-dash', soft: 'btn-soft', ghost: 'btn-ghost', link: 'btn-link', }, size: { xs: 'btn-xs', sm: 'btn-sm', md: 'btn-md', lg: 'btn-lg', xl: 'btn-xl', }, modifier: { wide: 'btn-wide', block: 'btn-block', square: 'btn-square', circle: 'btn-circle', }, },});
const Tag = href ? 'a' : 'button';---
<Tag class={button({ color, style, size, modifier, class: className })} data-slot="button" {...rest}> <slot /></Tag> <Button size="xs">Xsmall</Button> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button> <Button size="xl">Xlarge</Button>Colors
Section titled “Colors” <Button color="neutral">Neutral</Button> <Button color="primary">Primary</Button> <Button color="secondary">Secondary</Button> <Button color="info">Info</Button> <Button color="success">Success</Button> <Button color="warning">Warning</Button> <Button color="error">Error</Button> <Button color="accent">Accent</Button>Soft buttons
Section titled “Soft buttons” <Button style="soft"> Default </Button> <Button color="primary" style="soft"> Primary </Button> <Button color="secondary" style="soft"> Secondary </Button> <Button color="info" style="soft"> Info </Button> <Button color="success" style="soft"> Success </Button> <Button color="warning" style="soft"> Warning </Button> <Button color="error" style="soft"> Error </Button> <Button color="accent" style="soft"> Accent </Button>Outline buttons
Section titled “Outline buttons” <Button style="soft"> Default </Button> <Button color="primary" style="outline"> Primary </Button> <Button color="secondary" style="outline"> Secondary </Button> <Button color="info" style="outline"> Info </Button> <Button color="success" style="outline"> Success </Button> <Button color="warning" style="outline"> Warning </Button> <Button color="error" style="outline"> Error </Button> <Button color="accent" style="outline"> Accent </Button>Dash buttons
Section titled “Dash buttons” <Button style="dash"> Default </Button> <Button color="primary" style="dash"> Primary </Button> <Button color="secondary" style="dash"> Secondary </Button> <Button color="info" style="dash"> Info </Button> <Button color="success" style="dash"> Success </Button> <Button color="warning" style="dash"> Warning </Button> <Button color="error" style="dash"> Error </Button> <Button color="accent" style="dash"> Accent </Button>Ghost buttons
Section titled “Ghost buttons” <Button style="ghost"> Default </Button> <Button color="primary" style="ghost"> Primary </Button> <Button color="secondary" style="ghost"> Secondary </Button> <Button color="info" style="ghost"> Info </Button> <Button color="success" style="ghost"> Success </Button> <Button color="warning" style="ghost"> Warning </Button> <Button color="error" style="ghost"> Error </Button> <Button color="accent" style="ghost"> Accent </Button>As a link with href
Section titled “As a link with href” <Button href="#"> Default </Button> <Button color="primary" href="#"> Primary </Button> <Button color="secondary" href="#"> Secondary </Button> <Button color="info" href="#"> Info </Button> <Button color="success" href="#"> Success </Button> <Button color="warning" href="#"> Warning </Button> <Button color="error" href="#"> Error </Button> <Button color="accent" href="#"> Accent </Button>As link with link style modifier
Section titled “As link with link style modifier” <Button href="#" style="link"> Default </Button>Disabled
Section titled “Disabled” <Button disabled> Default </Button>Square and circle
Section titled “Square and circle” <Button modifier="square"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </Button> <Button modifier="circle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </Button>With icon
Section titled “With icon” <Button> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> Like </Button> <Button> Like <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </Button> <Button modifier="block"> Block </Button> <Button modifier="wide"> Wide </Button>