ボタン

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

インポート # 


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および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>

アクセシビリティ #

スクリーンリーダー

ボタンコンポーネントは、渡されたプロパティを暗黙的に含むネイティブボタン要素をレンダリングします。 ボタンを説明するテキストは、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ボタンをアクティブにします。
PrimeTekによるVue 3上のPrimeVue 4.0.7