Clayボタン
ボタンにはいくつかの種類とバリエーションがあります。 このチュートリアルでは、Clay taglibで作成できるボタンのさまざまなスタイルとバリエーションについて説明します。
種類
プライマリボタン ：最も重要なアクションに使用されます。 2つのプライマリボタンを一緒にしたり、互いに近くに配置することはできません。
ラベル付きのプライマリボタン：
<clay:button label="Primary" />
セカンダリボタン ：セカンダリアクションに使用されます。 複数のセカンダリボタンを一緒に、または互いに近くに配置できます。
<div class="col">
<clay:button displayType="secondary" label="Secondary" />
</div>
<div class="col">
<clay:button ariaLabel="Wiki" displayType="secondary" icon="wiki" />
</div>
ボーダレスボタン ：ツールバーなど、セカンダリボタンがデザインに対して重すぎる場合に使用されます。 これにより、デザインがクリーンになります。
<div class="col">
<clay:button displayType="borderless" label="Borderless" />
</div>
<div class="col">
<clay:button ariaLabel="Page Template" displayType="borderless" icon="page-template" />
</div>
リンクボタン： キャンセル操作に使用します。
<div class="col">
<clay:button displayType="link" label="Link" />
</div>
<div class="col">
<clay:button ariaLabel="Add Role" displayType="link" icon="add-role" />
</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 displayType="secondary" icon="indent-less" monospaced="<%= true %>" />
ブロックレベルボタン：
<clay:button block="<%= true %>" label="Button" />
プラスボタン：
<clay:button displayType="secondary" icon="plus" monospaced="<%= true %>" />
アクションボタン：
<clay:button displayType="borderless" icon="ellipsis-v" monospaced="<%= true %>" />
