Button

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

インポート#


import { Button } from 'primereact/button';
         

基本#

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


<Button label="Submit" />
         

リンク#

linkプロパティが存在する場合、ボタンはリンクとしてレンダリングできます。一方、アンカー要素に.p-buttonクラスを追加すると、リンクがボタンとして表示されます。

移動

<Button label="Link" link onClick={() =>  window.open('https://react.dokyumento.jp', '_blank')}/>
<a href="https://react.dokyumento.jp" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
    Navigate
</a>
         

アイコン#

ボタンのアイコンはiconプロパティで指定し、位置はiconPos属性で設定します。


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

読み込み中#

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


<Button label="Submit" icon="pi pi-check" loading={loading} onClick={load} />
         

重要度#

重要度はボタンのタイプを定義します。


<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warning" severity="warning" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
         

無効#

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="Warning" severity="warning" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" 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="Warning" severity="warning" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" 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="Warning" severity="warning" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" 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="Warning" severity="warning" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" 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="Warning" severity="warning" outlined />
<Button label="Help" severity="help" outlined />
<Button label="Danger" severity="danger" 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="warning" 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-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" rounded severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" rounded severity="success" aria-label="Search" />
<Button icon="pi pi-user" rounded severity="info" aria-label="User" />
<Button icon="pi pi-bell" rounded severity="warning" aria-label="Notification" />
<Button icon="pi pi-heart" rounded severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" rounded severity="danger" aria-label="Cancel" />

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

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

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

バッジ#

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


<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" outlined badge="2" badgeClassName="p-badge-danger" />
         

ボタングループ#

複数のボタンは、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 className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem"></img>
</Button>
         

アクセシビリティ#

スクリーンリーダー

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


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

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

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

キーボードサポート

キー機能
tabボタンにフォーカスを移動します。
Enterボタンをアクティブにします。
Spaceボタンをアクティブにします。
                                      PrimeReact 10.8.3 by PrimeTek