IconButton

Accessible, unstyled icon-only button primitive.

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 { IconButton } from "@vizejs/ui/icon-button";

Or copy the source into your project with vize lib pull icon-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

<!-- Icon-only buttons that carry their accessible name through aria-label. -->
<script setup lang="ts">
import { ref } from "vue";

import { IconButton } from "@vizejs/ui/icon-button";

const count = ref(0);

function addItem(): void {
  count.value += 1;
}
</script>

<template>
  <div>
    <IconButton ariaLabel="Add item" variant="solid" tone="accent" @press="addItem">
      <svg
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="none"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path d="M12 5v14M5 12h14" />
      </svg>
    </IconButton>
    <IconButton ariaLabel="Delete item" tone="danger" disabled>
      <svg
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="none"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" />
      </svg>
    </IconButton>
    <output>{{ count }} items</output>
  </div>
</template>

API

IconButton

Source: src/families/layout/icon/icon-button.vue

Props

Events

Slots

Exposed

Behavior