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.