ボタンにはいくつかの種類とバリエーションがあります。このチュートリアルでは、Clay taglibで作成できるボタンのさまざまなスタイルとバリエーションについて説明します。
種類
**プライマリボタン：**最も重要なアクションに使用されます。2つのプライマリボタンを一緒にしたり、互いに近い位置に配置することはできません。
ラベル付きのプライマリボタン：
<clay:button label="Primary" />
**セカンダリボタン：**二次アクションに使用されます。複数のセカンダリボタンを一緒に、または互いに近くに配置できます。
<div class="col">
<clay:button label="Secondary" style="secondary" />
</div>
<div class="col">
<clay:button ariaLabel="Wiki" icon="wiki" style="secondary" />
</div>
縁なしボタン： ツールバーなど、セカンダリボタンがデザインに対して重すぎる場合に使用します。これにより、デザインがすっきりします。
<div class="col">
<clay:button label="Borderless" style="borderless" />
</div>
<div class="col">
<clay:button ariaLabel="Page Template" icon="page-template" style="borderless" />
</div>
リンクボタン： キャンセルアクションに使用されます。
<div class="col">
<clay:button label="Link" style="link" />
</div>
<div class="col">
<clay:button ariaLabel="Add Role" icon="add-role" style="link" />
</div>
ボタンにラベルまたはアイコンを使用できます。以下は、アイコン付きのプライマリボタンの例です。
<clay:button ariaLabel="Workflow" icon="workflow" />
disabled属性を追加することで、ボタンを無効にできます。
<div class="col">
<clay:button disabled="<%= true %>" label="Primary" />
</div>
<div class="col">
<clay:button ariaLabel="Workflow" disabled="<%= true %>" icon="workflow" />
</div>
バリエーション
アイコンとテキストを含むボタン：
<clay:button icon="share" label="Share" />
等幅テキストを含むボタン：
<clay:button icon="indent-less" monospaced="<%= true %>" style="secondary" />
ブロックレベルボタン：
<clay:button block="<%= true %>" label="Button" />
プラスボタン：
<clay:button icon="plus" monospaced="<%= true %>" style="secondary" />
アクションボタン：
<clay:button icon="ellipsis-v" monospaced="<%= true %>" style="borderless" />