Auth Buttons
Auth Buttons provide ready-to-use authentication buttons for OAuth providers (Microsoft, Google, Apple) and custom login flows. Each provider button ships with the correct branding, logo, and label.
Loading Code Block...For type="custom", pass logo as a React node (for example <GlobeIcon />).
For type="custom", pass logo as a component (for example :logo="GlobeIcon") or a string URL (rendered as an <img>).
Default (custom type)
Section titled “Default (custom type)”Use type="custom" with text and optional logo when you are not using a built-in provider.
Loading Code Block...Set type to a provider name (microsoft, google, apple) for a pre-branded button, or custom for your own text and logo. The preview below uses variant="default" only; use Variants to compare default and outline for custom buttons.
Loading Code Block...Variants
Section titled “Variants”For type="custom", each auth button supports default (filled) and outline (bordered). The example uses GlobeIcon from
Loading Code Block...Provider buttons
Section titled “Provider buttons”Use a provider type for the correct logo and label.
Loading Code Block...Custom branding
Section titled “Custom branding”With type="custom", set text, optional logo (for example GlobeIcon from @hubtel/react-icons or @hubtel/vue-icons), and optional bgColor (Tailwind classes) for the filled style. Use
Loading Code Block...