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 full-width OAuth provider button with a brand icon slot - "Continue with GitHub".
<!--
Full width because it stacks with the email field above it in a sign-in card,
and a provider row that does not match the form's width reads as an afterthought.
The brand glyph is aria-hidden - "Continue with GitHub" already names it.
-->
<button class="social-btn" type="button">
<svg class="social-btn__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.3-1.7-1.3-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
</svg>
Continue with GitHub
</button>| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | ReactNode | - | Icon element rendered alongside the content. |
childrenrequired | ReactNode | - | Content rendered inside the component. |
disabled | boolean | false | Prevents interaction and dims the control. |
onClick | () => void | - | Fired when the user activates the control. |
Full width because it stacks under the email field in a sign-in card, and a provider row narrower than the form reads as an afterthought. Swap the `icon` prop for any provider mark; draw it with `fill="currentColor"` so it follows the label into dark mode instead of staying a black glyph on a black button. The glyph is `aria-hidden` - the label already names the provider.