Button

Headless Button; covers shadcn/ui Button, Reka UI Primitive, React Aria Button.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Button } from "@vizejs/ui/button";

Or copy the source into your project with vize lib pull button (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Native buttons showing press handling, a loading state, and a disabled action. -->
<script setup lang="ts">
import { ref } from "vue";

import { Button } from "@vizejs/ui/button";

const saves = ref(0);
</script>

<template>
  <div>
    <Button type="button" @press="() => (saves += 1)">Save draft</Button>
    <Button v-slot="{ loading }" type="button" loading>
      {{ loading ? "Uploading…" : "Upload" }}
    </Button>
    <Button type="button" disabled>Publish</Button>
    <output>Saved {{ saves }} times</output>
  </div>
</template>

API

Button

Source: src/families/actions/button/button.vue

Props

Events

Slots

Exposed

Behavior

Normative state × input → outcome table for src/families/actions/button/button.vue (@vizejs/ui/button). Every row is proven by the named mounted-DOM test in src/families/actions/button/button.test.ts; a row without a passing test is a contract violation.

Keyboard activation timing (Enter on keydown, Space on keyup, Space keydown canceled) is additionally pinned as pure logic by matches native keyboard activation timing.