Button

A button component that triggers actions or events.

Examples

Primary

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button>Button</Button>

Secondary

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button variant="secondary">Secondary</Button>

Destructive

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button variant="destructive">Destructive</Button>

Outline

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button variant="outline">Outline</Button>

Ghost

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button variant="ghost">Ghost</Button>

Link

<script setup>
import { Button } from '@empathyds/vue'
</script>

<Button variant="link">Link</Button>

Props

Button

Prop	Type	Default	Description
variant	default | destructive | outline | secondary | ghost | link	default	The visual style of the button.
size	default | sm | lg | icon	default	The size of the button.
as	string	button	The HTML element to render as.
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child.

Slots

Button

Slot	Description
default	The content of the button.