Vuetify0 is now in alpha! See the roadmap for details.

Theme

Mode

Palettes

Accessibility

Button API

API reference for the Button components.

Explore these related pages for additional context and usage patterns.

Page	Category
Button	Actions
createSelection	Selection
Single	Providers
Atom	Primitives

Button.Root

Props

disabled

boolean | undefined

Disables the button — fully non-interactive, removed from tab order

Default: false

readonly

boolean | undefined

Non-clickable but looks normal, remains focusable/hoverable

passive

boolean | undefined

Non-clickable, looks disabled via [data-passive], remains focusable/hoverable

Default: false

loading

boolean | undefined

Triggers loading state with grace period before visual indicator

Default: false

grace

number | undefined

Duration in ms before loading UI appears (0 to show immediately)

Default: 0

value

V | undefined

Value for use inside Button.Group

namespace

string | undefined

Namespace for context provision to children

Default: "v0:button:root"

groupNamespace

string | undefined

Namespace for connecting to parent Button.Group

Default: "v0:button:group"

name

string | undefined

Form field name — auto-renders HiddenInput when set

form

string | undefined

Associate with form by ID

ariaLabel

string | undefined

Accessible label for the button

Slots

default

ButtonRootSlotProps

Button.Content

Props

id

any

Unique identifier for ticket registration

Default: useId()

namespace

string | undefined

Namespace for context injection from parent Button.Root

Default: "v0:button:root"

Slots

default

ButtonContentSlotProps

Button.Group

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:button:group"

disabled

boolean | undefined

Disables the entire button group

Default: false

multiple

boolean | undefined

Single (default) or multi-select

Default: false

mandatory

boolean | "force" | undefined

Controls mandatory selection behavior: - false (default): No mandatory enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration

Default: false

label

string | undefined

Accessible name for the group

ariaLabelledby

string | undefined

ID of element that labels this group

ariaDescribedby

string | undefined

ID of element that describes this group

modelValue

T | T[] | undefined

Events

update:model-value

[value: T | T[]]

Slots

default

ButtonGroupSlotProps

Button.HiddenInput

Props

namespace

string | undefined

Namespace for context injection from parent Button.Root

Default: "v0:button:root"

name

string | undefined

Form field name

value

string | undefined

Submitted value (defaults to 'on')

form

string | undefined

Associate with form by ID

Button.Icon

Props

namespace

string | undefined

Namespace for context injection from parent Button.Root

Default: "v0:button:root"

Slots

default

ButtonIconSlotProps

Button.Loading

Props

id

any

Unique identifier for ticket registration

Default: useId()

namespace

string | undefined

Namespace for context injection from parent Button.Root

Default: "v0:button:root"

Slots

default

ButtonLoadingSlotProps

Was this page helpful?