Button

ボタンは、アイコンとテーマを備えた標準入力要素の拡張機能です。

インポート # 


import Button from 'primevue/button';

基本 #

ボタンに表示するテキストは、labelプロパティで定義します。


<Button label="Submit" />

アイコン #

ボタンのアイコンはiconプロパティで指定し、位置はiconPos属性を使用して構成します。


<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />

読み込み中 #

ビジー状態は、loadingプロパティで制御します。


<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />

リンク #

ボタン要素は、linkプロパティが存在する場合、視覚的にリンク要素として表示できます。実際のナビゲーションにボタンを使用する必要がある場合は、レンダリングされる要素をカスタマイズするためにasプロパティを使用します。

外部ルーター

<Button label="Link" link />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />

重要度 #

severityプロパティは、ボタンのバリアントを定義します。


<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warn" severity="warn" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
<Button label="Contrast" severity="contrast" />

無効 #

disabledが存在する場合、要素は編集およびフォーカスできません。


<Button label="Submit" disabled />

隆起 #

隆起したボタンは、隆起を示すために影を表示します。


<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
<Button label="Info" severity="info" raised />
<Button label="Warn" severity="warn" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" raised />
<Button label="Contrast" severity="contrast" raised />

丸形 #

丸形のボタンは、円形の境界半径を持っています。


<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
<Button label="Info" severity="info" rounded />
<Button label="Warn" severity="warn" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" rounded />
<Button label="Contrast" severity="contrast" rounded />

テキスト #

テキストボタンは、テキスト要素として表示されます。


<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />
<Button label="Info" severity="info" text />
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />

隆起したテキスト #

テキストボタンは、隆起させて表示することもできます。


<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />
<Button label="Info" severity="info" text raised />
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />

アウトライン #

アウトラインボタンは、最初は背景なしで境界を表示します。


<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />
<Button label="Info" severity="info" outlined />
<Button label="Warn" severity="warn" outlined />
<Button label="Help" severity="help" outlined />
<Button label="Danger" severity="danger" outlined />
<Button label="Contrast" severity="contrast" outlined />

アイコンのみ #

ボタンには、ラベルなしでアイコンを付けることができます。


<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" />

<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />

<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />

<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />

<Button icon="pi pi-check" text rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />

Badge #

ボタンには、badgeプロパティとbadgeSeverityプロパティによる組み込みのバッジサポートがあります。


<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />

ボタングループ #

複数のボタンは、ButtonGroupコンポーネントを持つ要素内にラップされるとグループ化されます。


<ButtonGroup>
    <Button label="Save" icon="pi pi-check" />
    <Button label="Delete" icon="pi pi-trash" />
    <Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>

サイズ #

ボタンは、標準の代替としてsmallサイズとlargeサイズを提供します。


<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />

テンプレート #

ボタン内のカスタムコンテンツは、子として定義されます。


<Button outlined class="border-2">
    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="..." fill="var(--p-primary-color)" />
        <path d="..." fill="var(--p-text-color)" />
    </svg>
</Button>

ヘッドレス #

ヘッドレスモードは、asChildプロパティを追加し、使用可能なバインディングを使用して独自のUI要素を定義することで有効になります。


<Button v-slot="slotProps" asChild>
    <button
        v-bind="slotProps.a11yAttrs"
        class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
    >
        SIGN UP
    </button>
</Button>

アクセシビリティ #

スクリーンリーダー

ボタンコンポーネントは、渡されたpropを暗黙的に含むネイティブボタン要素をレンダリングします。ボタンを説明するテキストは、aria-labelプロップで定義されます。存在しない場合、labelプロップが値として使用されます。ボタンがアイコンのみの場合、またはカスタムテンプレートを使用している場合は、スクリーンリーダーが要素を適切に読み取ることができるように、aria-labelを使用することをお勧めします。


<Button icon="pi pi-check" aria-label="Submit" />

<Button icon="pi pi-check" label="Submit" />

<Button class="youtube p-0" aria-label="Youtube">
    <i class="pi pi-youtube px-2"></i>
    <span class="px-4">Youtube</span>
</Button>

キーボードサポート

キー機能
tabボタンにフォーカスを移動します。
enterボタンをアクティブにします。
spaceボタンをアクティブにします。
PrimeVue 3のPrimeTekによるVue 3.0.7PrimeTek