FeaturedNew
ButtonsGradient Glow Button
A call-to-action button with a gradient fill and a soft coloured glow on hover.
#gradient#glow#hover
6 frameworksBeginner
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 | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | The button's accessible name. Required for icon-only buttons. |
childrenrequired | ReactNode | - | Content rendered inside the component. |
onClick | () => void | - | Fired when the user activates the control. |
disabled | boolean | false | Prevents interaction and dims the control. |
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.