この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ボタンの表示ラベル

ボタンには、テキストのみ、アイコンとテキスト、またはテキストなしのアイコンを表示することができます。アクセシビリティに対応したボタンを作成するには、lightning:button を使用し、label 属性を使用してテキスト表示ラベルを設定します。

アクセシビリティに対応したボタンを作成するには ui:button を使用することもできますが、これは Lightning Design System スタイル設定に含まれていません。代わりに lightning:button を使用することをお勧めします。

メモ

テキストのみのボタン:

1<lightning:button label="Search" onclick="{!c.doSomething}"/>

アイコンとテキストのボタン:

1<lightning:button label="Download" iconName="utility:download" onclick="{!c.doSomething}"/>

アイコンのみのボタン:

1<lightning:buttonIcon iconName="utility:settings" alternativeText="Settings" onclick="{!c.doSomething}"/>

alternativeText 属性は、ビューには表示されず、支援技術に使用される表示ラベルを設定します。

lightning:button によって生成される HTML の例を次に示します。

1<!-- Good: using span/assistiveText to hide the label visually, but show it to screen readers -->
2<button>
3    ::before
4    <span class="slds-assistive-text">Settings</span>
5</button>

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

ボタンの表示ラベル