Component

Button

<DomButton>

The atomic call to action — variants, sizes, loading state, and any underlying element.

Playground

Try every prop live

Button playground

Edit any prop on the right — the rendered button and the synthesised source update together. No example SFC needed; the playground auto-builds its data from DomButton's defineProps.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomButton } from '@getdom/studio/vue';

const data = reactive({
	  "as": "button",
	  "variant": "primary",
	  "size": "md",
	  "loading": false,
	  "disabled": false
	});
</script>

<template>
	<DomButton
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`as`	string	string	'button'	The HTML element or component to render. Use 'router-link' or 'a' to render a link.
`variant`	'primary' \| 'secondary' \| 'ghost' \| 'danger'	string	'primary'	Visual style — pick the role this button plays in the layout.
`size`	'sm' \| 'md' \| 'lg'	string	'md'	Three balanced sizes.
`loading`	boolean	boolean	false	Show a spinner and block interaction.
`disabled`	boolean	boolean	false	Disable the button — non-interactive, lowered opacity.

Auto-generated from Button.props and inline _edit hints.

Slots

Name	Scope	Description
#(default)	—	Button label and/or icons.