Component Docs
Button コンポーネント
すべてのボタンの基本スタイル。インタラクティブ要素に必要な共通のスタイルとレイアウトを提供します。
.btn-base
バリアント
Ghost
.btn-ghost ゴーストスタイルのボタン。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。
Gradient
.btn-gradient グラデーションスタイルのボタン。グラデーション効果が適用されます。
Icon
.btn-icon アイコン用ボタン。正方形で、アイコンを中央に配置します。
Icon Ghost
.btn-icon-ghost ゴーストスタイルのアイコン用ボタン。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。
Icon Outline
.btn-icon-outline アウトラインスタイルのアイコン用ボタン。枠線のみで、ホバー時に背景色が表示されます。
Link
.btn-link リンク風ボタン。通常のテキストリンクのような見た目で、ホバー時に下線が表示されます。
Outline
.btn-outline アウトラインスタイルのボタン。枠線のみで、ホバー時に背景色が表示されます。
Solid
.btn-solid 塗りつぶしスタイルのボタン。背景色が適用されます。
Subtle
.btn-subtle 控えめなボタン。薄い背景色が適用され、ホバー時に色が濃くなります。
使用例
<button class="btn-base btn-solid theme-primary p-2">ソリッドボタン</button>
<button class="btn-base btn-outline theme-primary p-2">アウトラインボタン</button>
<button class="btn-base btn-ghost theme-primary p-2">ゴーストボタン</button>
<button class="btn-base btn-link theme-primary p-2">リンクボタン</button>
<button class="btn-base btn-gradient theme-primary p-2">グラデーションボタン</button>
<button class="btn-base btn-subtle theme-primary p-2">サブトルボタン</button>
<button class="btn-base btn-icon theme-primary ">♥️</button>
<button class="btn-base btn-icon-outline theme-primary">♥️</button>
<button class="btn-base btn-icon-ghost theme-primary">♥️</button>
<button class="btn-base btn-solid theme-primary">ボタン</button>