按钮初级MIT英文

Pill Button

A fully rounded button with a leading count badge for unread or pending totals.

#pill#rounded#badge#count#notification

预览

代码

<!--
  The count is a real text node inside the button, not an aria-hidden
  decoration, so the accessible name reads "12 Notifications" - which is the
  information a badge is there to convey in the first place.
-->
<button class="pill-btn" type="button">
  <span class="pill-btn__count">12</span>
  Notifications
</button>

属性

Prop	类型	默认值	说明
`count`必填	`number`	`-`	徽标中显示的数字；超过 99 会折叠显示为“99+”。
`children`必填	`ReactNode`	`-`	在组件内部渲染的内容。
`disabled`	`boolean`	`false`	禁止交互并将控件置灰。
`onClick`	`() => void`	`-`	用户激活控件时触发。

变体

默认紧凑禁用

自定义

The `rounded-full` radius is deliberately larger than any height the button can reach, which is what keeps the ends true semicircles at every size instead of a radius you have to re-guess. The count is a real text node, not an `aria-hidden` decoration, so the accessible name reads "12 Notifications" - which is the whole reason a badge is there. `tabular-nums` stops the width jittering as the number ticks.

详情

作者: ADYSRE
版本: 1.0.1
创建时间: 2026-05-19
更新时间: 2026-06-24

代码

<!--
  The count is a real text node inside the button, not an aria-hidden
  decoration, so the accessible name reads "12 Notifications" - which is the
  information a badge is there to convey in the first place.
-->
<button class="pill-btn" type="button">
  <span class="pill-btn__count">12</span>
  Notifications
</button>

Prop

类型

默认值

说明

count必填

number

-

徽标中显示的数字；超过 99 会折叠显示为“99+”。

children必填

ReactNode

-

在组件内部渲染的内容。

disabled

boolean

false

禁止交互并将控件置灰。

onClick

() => void

-

用户激活控件时触发。

自定义

预览

代码

属性

变体

自定义

详情

相关组件

预览

代码

属性

变体

自定义

详情

相关组件