ui:button

汎用的なButtonコンポーネントです。

Examples

Sizes

Source Code

<div class="flex flex-wrap gap-4">
  <button class="ui:button" type="button" data-size="small">Small Button</button>
  <a class="ui:button" href="#">Medium Button</a>
  <a class="ui:button" data-size="large" href="#">Large Button</a>
</div>

Colors

Source Code

<div class="flex flex-wrap gap-4">
  <a class="ui:button" data-color="red" href="#">詳細を見る</a>
  <a class="ui:button" data-color="red-subtle" href="#">詳細を見る</a>
  <a class="ui:button" data-color="green" href="#">詳細を見る</a>
  <a class="ui:button" data-color="orange" href="#">詳細を見る</a>
</div>

Icons

Source Code

<div class="flex flex-wrap gap-4">
  <a class="ui:button" data-color="red" href="#">
    詳細を見る
    <ui-icon data-icon="chevron-right"></ui-icon>
  </a>
  <a class="ui:button" data-color="red" href="#">
    詳細を見る
    <ui-icon data-icon="external-link"></ui-icon>
  </a>
  <a class="ui:button" data-color="red" href="#">
    <ui-icon data-icon="chevron-right"></ui-icon>
    詳細を見る
  </a>
</div>

Disabled

Source Code

<button class="ui:button" type="button" data-color="red" disabled>Button</button>

Variants

属性	要素	値	効果
data-color	root	red / red-subtle …	カラーバリエーションの指定
data-size	root	small / large	サイズの指定
disable	<button>	-	無効化の指定

Notes

• Noto fontは、テキスト上部のhalf-leadingが大きいため、テキストが1pxほど下にズレて表示されます。
  • アイコン付与時にそれがズレて見えるため、.ui:icon の位置をスタイルで調整しています。