DOM Studio

Component

Vue Icon Button Component

<DomIconButton>

A compact accessible button for toolbar, row action, and chrome controls.

Playground

Try every prop live

Icon button playground

Adjust the props to explore sizing, content, and behaviour.

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomIconButton } from '@getdom/studio';

const data = reactive({
		"as": "button",
		"label": "Add item",
		"icon": "M12 5v14M5 12h14",
		"variant": "ghost",
		"size": "md",
		"active": false,
		"pressed": false,
		"loading": false,
		"disabled": false
	});
</script>

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

Reference

Props

Control props

NameTypeTSDefaultDescription
asstringstring'button'Element to render. Use 'a' or 'RouterLink' for navigational icon controls.
labelstringstring'Action'Accessible label for screen readers.
iconstring | object | functionRecord<string, unknown>'M12 5v14M5 12h14'Fallback SVG path data, or a Vue icon component from libraries such as lucide-vue-next.
variant'ghost' | 'secondary' | 'primary' | 'danger'string'ghost'Visual role.
size'xs' | 'sm' | 'md' | 'lg'string'md'Hit area size.
activebooleanbooleanfalseShow active/selected state.
pressedbooleanbooleanfalseShow native press feedback for an external activation, such as a keyboard shortcut. Does not represent toggle selection.
loadingbooleanbooleanfalseShow a loading spinner and block interaction.
disabledbooleanbooleanfalseDisable interaction.

Auto-generated from Icon button.props and inline _edit hints.

Slots

NameScopeDescription
#(default)—Custom icon content. Use an SVG or icon component sized to 1em or Tailwind size utilities.