Components
Social Button
Social button
Provider sign-in buttons on pc-button
geometry, so they follow your theme, sizes and radius like every other button. Nine providers, outline or solid, plus the raw glyphs via brand_icon.
The sign-in stack
The canonical auth-card column: outline buttons, coloured glyphs, riding pc-button geometry so they match every other button and follow the radius dial. OAuth flows are plain GETs, so href points at /auth/:provider.
<div class="flex flex-col w-full max-w-xs gap-3 mx-auto">
<.social_button provider="google" href="#" class="w-full" />
<.social_button provider="github" href="#" class="w-full" />
<.social_button provider="apple" href="#" class="w-full" />
<.social_button provider="x" href="#" class="w-full" />
</div>
Solid, the brand's own paint
variant="solid" puts the provider's colour on the button. The black brands (GitHub, Apple, X) keep a hairline border in dark mode so they never dissolve into the page.
<div class="flex flex-wrap items-center justify-center gap-3">
<.social_button provider="google" variant="solid" href="#" />
<.social_button provider="github" variant="solid" href="#" />
<.social_button provider="discord" variant="solid" href="#" />
<.social_button provider="gitlab" variant="solid" href="#" />
</div>
Icon-only rows
icon_only for tight layouts - the label moves into aria-label, so the compact row stays accessible. Custom labels replace the default "Continue with" copy.
<div class="flex flex-col items-center gap-4">
<div class="flex items-center gap-2">
<.social_button provider="google" icon_only href="#" />
<.social_button provider="github" icon_only href="#" />
<.social_button provider="microsoft" icon_only href="#" />
<.social_button provider="linkedin" icon_only href="#" />
<.social_button provider="facebook" icon_only href="#" />
</div>
<.social_button provider="google" label="Login with Google" size="sm" href="#" />
</div>
The brand glyphs themselves
brand_icon is its own component - monochrome currentColor by default so it tints like any icon, colored for the official treatment. Use it anywhere, not just in buttons.
<div class="flex flex-col items-center gap-5">
<div class="flex flex-wrap items-center justify-center gap-4 text-gray-700 dark:text-gray-300">
<.brand_icon name="google" class="w-6 h-6" />
<.brand_icon name="github" class="w-6 h-6" />
<.brand_icon name="apple" class="w-6 h-6" />
<.brand_icon name="x" class="w-6 h-6" />
<.brand_icon name="facebook" class="w-6 h-6" />
<.brand_icon name="microsoft" class="w-6 h-6" />
<.brand_icon name="gitlab" class="w-6 h-6" />
<.brand_icon name="discord" class="w-6 h-6" />
<.brand_icon name="linkedin" class="w-6 h-6" />
</div>
<div class="flex flex-wrap items-center justify-center gap-4">
<.brand_icon name="google" colored class="w-6 h-6" />
<.brand_icon name="github" colored class="w-6 h-6 text-gray-900 dark:text-white" />
<.brand_icon name="apple" colored class="w-6 h-6 text-gray-900 dark:text-white" />
<.brand_icon name="x" colored class="w-6 h-6 text-gray-900 dark:text-white" />
<.brand_icon name="facebook" colored class="w-6 h-6" />
<.brand_icon name="microsoft" colored class="w-6 h-6" />
<.brand_icon name="gitlab" colored class="w-6 h-6" />
<.brand_icon name="discord" colored class="w-6 h-6" />
<.brand_icon name="linkedin" colored class="w-6 h-6" />
</div>
</div>
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
|
href
|
string |
nil
|
plain link target - OAuth flows are GETs |
icon_only
|
boolean |
false
|
glyph only; the label becomes the accessible name |
label
|
string |
nil
|
button text; defaults to "Continue with {Provider}" |
navigate
|
string |
nil
|
|
patch
|
string |
nil
|
|
provider*
|
string |
one of: "google", "github", "apple", "x", "facebook", "microsoft", "gitlab", "discord", "linkedin"
|
|
rest
|
global |
phx-click and friends work here when rendered as a button | |
size
|
string |
"md"
|
one of: "sm", "md", "lg"
|
variant
|
string |
"outline"
|
outline is the neutral button with the coloured glyph; solid paints the brand colour
one of: "outline", "solid"
|
brand_icon
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
|
colored
|
boolean |
false
|
official brand colours instead of currentColor |
name*
|
string |
one of: "google", "github", "apple", "x", "facebook", "microsoft", "gitlab", "discord", "linkedin"
|
|
rest
|
global |