Ghost Button - Free Tailwind CSS Component

プレビュー

コード

<button class="ghost-btn" type="button">
  Cancel
</button>

プロパティ

Prop	型	デフォルト	説明
`children`必須	`ReactNode`	`-`	コンポーネントの内部にレンダリングされるコンテンツ。
`disabled`	`boolean`	`false`	操作を無効にし、コントロールを淡色表示にします。
`onClick`	`() => void`	`-`	ユーザーがコントロールを実行したときに発火します。

バリアント

デフォルトテキスト無効

カスタマイズ

Pair it with a filled button as the Cancel to its Save; the point is that it recedes. The transparent border at rest is not decoration - it reserves the 1px so the button does not jump when it sits beside a bordered sibling. Deepen `hover:bg-gray-100` to `gray-200` if your surface is already grey.