IconButton アイコンボタン

円形の操作ボタン。アイコンに明確なアクセシブルネームを与えます。

基本的な使い方

インタラクティブプレビュー

未マーク

Vue のソースを表示

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="マーカーを切り替え"
      :pressed="active"
      @click="active = !active"
    />
    <span>{{ active ? 'マーク済み' : '未マーク' }}</span>
    <AgmIconButton label="使用できない操作" 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

プロパティ	型	デフォルト	説明
label	string	必須	アクセシブルネーム
disabled	boolean	false	操作を無効にする
pressed	boolean	undefined	任意のトグル状態

スロット

• default：アイコン（既定はプラス記号）

キーボード操作と利用上の注意

Tab でフォーカス、Enter または Space で実行。label には操作の内容を書いてください。

インストール

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