精选最新
按钮Gradient Glow Button
A call-to-action button with a gradient fill and a soft coloured glow on hover.
#gradient#glow#hover
6 个框架初级
Loading…
A square, icon-only button whose accessible name is enforced by its own type signature.
<!--
An icon-only button has no text node, so without aria-label a screen reader
announces nothing but "button". The label is not optional decoration - it is
the button's entire accessible name. The svg is aria-hidden so it cannot
compete with it.
-->
<button class="icon-btn" type="button" aria-label="Add to favourites">
<svg class="icon-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 21s-7.5-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12c-1.8 4.4-9.3 9-9.3 9Z" />
</svg>
</button>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
children必填 | ReactNode | - | 在组件内部渲染的内容。 |
onClick | () => void | - | 用户激活控件时触发。 |
disabled | boolean | false | 禁止交互并将控件置灰。 |
An icon-only button has no text node, so without `aria-label` it announces as nothing but "button". The TypeScript variant omits `aria-label` from the inherited attributes and re-declares it as a required `label` prop - the compiler, not a code review, is what stops an unnamed one shipping. Keep the 40px box: it clears the minimum target size even when the glyph inside is 20px.