注目新着
ボタン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.