IconButton

A round action button that gives its icon a clear accessible name.

Basic usage

Live preview

Not marked

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmIconButton } from 'augma'
import { shallowRef } from 'vue'

const active = shallowRef(false)
</script>

<template>
  <div class="example-row">
    <AgmIconButton
      label="Toggle marker"
      :pressed="active"
      @click="active = !active"
    />
    <span>{{ active ? 'Marked' : 'Not marked' }}</span>
    <AgmIconButton label="Unavailable action" disabled />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

Prop	Type	Default	Description
label	string	Required	Accessible name
disabled	boolean	false	Blocks interaction
pressed	boolean	undefined	Optional toggle state

Slots

• default: icon, a plus sign by default

Keyboard and usage notes

Tab to focus; Enter or Space to activate. The label must describe the action.

Installation

import { AgmIconButton } from 'augma'
import 'augma/style.css'