Social button
Sign in with a third-party account. Brand and color themes from Figma.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="stack" style="max-width:320px;width:100%">
<button type="button" class="px-social"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23 12.3c0-.8-.1-1.6-.2-2.3H12v4.4h6.2a5.3 5.3 0 0 1-2.3 3.5v2.9h3.7C21.8 18.8 23 15.8 23 12.3z"/><path fill="#34A853" d="M12 23.5c3.1 0 5.7-1 7.6-2.8L15.9 18c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3A11.5 11.5 0 0 0 12 23.5z"/><path fill="#FBBC05" d="M5.6 14.3a6.9 6.9 0 0 1 0-4.4v-3H1.8a11.5 11.5 0 0 0 0 10.4z"/><path fill="#EA4335" d="M12 5.1c1.7 0 3.2.6 4.4 1.7l3.3-3.3A11.5 11.5 0 0 0 1.8 6.9l3.8 3c.9-2.8 3.4-4.8 6.4-4.8z"/></svg>Sign in with Google</button>
<button type="button" class="px-social px-social--dark"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9a4.8 4.8 0 0 0-3.8-2c-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9a5 5 0 0 0-4.2 2.6c-1.8 3.1-.5 7.7 1.3 10.2.8 1.2 1.8 2.6 3.1 2.5 1.3 0 1.7-.8 3.3-.8 1.5 0 1.9.8 3.3.8 1.4 0 2.2-1.3 3-2.5a10 10 0 0 0 1.4-2.8 4.4 4.4 0 0 1-2.3-4.1zM13.9 5c.7-.8 1.2-2 1.1-3.1-1 0-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.1 1.1.1 2.3-.6 3-1.6z"/></svg>Sign in with Apple</button>
</div>Usage
- Stack social buttons above the email form with a Divider labelled “OR”.
- Keep the provider name in the label.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-social | class | Light theme (Figma Theme = Color). |
px-social--dark | class | Dark brand theme. |
Figma properties
Social button90 variants · page “Buttons”Open
| Property | Type | Values |
|---|---|---|
| Social | Variant | Google Facebook Apple Twitter Figma |
| Supporting text | Variant | True False |
| Theme | Variant | Brand Color Color with brand |
| State | Variant | Default Hover Focused |
Accessibility
- The provider logo is decorative; the label says the provider.