Button ボタン

軽く触れて、すぐに応答。操作の実行や状態の切り替えに使います。

基本的な使い方

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

0 回操作しました

Vue のソースを表示

Vue · TypeScript

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

const count = shallowRef(0)
</script>

<template>
  <div class="example-row">
    <AgmButton @click="count++">デバイスを接続</AgmButton>
    <AgmButton variant="outline" @click="count++">サブアクション</AgmButton>
    <AgmButton variant="ghost" @click="count++">控えめなアクション</AgmButton>
    <AgmButton loading>読み込み中</AgmButton>
    <AgmButton disabled>使用不可</AgmButton>
    <output aria-live="polite">{{ count }} 回操作しました</output>
  </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

プロパティ	型	デフォルト	説明
variant	'primary' | 'outline' | 'ghost'	'primary'	視覚的な強調度
disabled	boolean	false	操作を無効にする
loading	boolean	false	処理中を示し、重複操作を防ぐ
type	'button' | 'submit' | 'reset'	'button'	ネイティブのボタン種別

スロット

• default：ボタンのテキスト

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

Tab でフォーカス、Enter または Space で実行。読み込み中や無効な状態では操作を受け付けません。

インストール

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

編集可能なソースをコピー：

pnpm dlx [email protected] add https://augma.yyj.moe/r/button.json