Social Buttons

About this block

Social Buttons is a flat row of five branded provider buttons. From left to right a reader sees GitHub in an outline style, then Twitter, Facebook, and LinkedIn each filled with their official brand color, and finally a full multicolor Google button rendered from an inline SVG. Every button pairs a small platform icon with a short label, so the provider is immediately recognizable at a glance.

Each button is independent. You can keep only the providers your product supports and drop the rest without touching the others. The outline versus filled treatment on GitHub and Google mirrors common convention, but you can swap either to match your own auth screen style. Copy on every button is a single word, so renaming or translating takes one edit per item.

When to use

Reach for this block on any sign in or sign up screen where you want readers to authenticate through an existing account rather than fill out a form. It fits well on a logistics and delivery platform where drivers and dispatchers need fast access on mobile and desktop alike. Compared to a plain text link list, the branded colors and icons let users spot their preferred provider in under a second.

A natural flow around it on a Components page:

Before

• Interactive Buttons to show primary form actions above the social row
• A short email and password form that the social buttons sit below as an alternative path

After

• Alerts to surface an auth error or success message right after the user taps a provider
• Cards wrapping the whole sign in panel to give the buttons a contained, centered frame

What you can display

The block is built for authentication screens, but the branded button pattern fits any context where a named third party action is clearer than a generic label:

• OAuth sign in. Place all five buttons on a login page so users can reach their preferred provider without scanning a long list.
• Connect accounts. Show only the providers a user has not yet linked on a settings screen so they can add integrations one tap at a time.
• Share actions. Swap the labels to "Share on Twitter" and "Post to LinkedIn" and drop GitHub and Google for a focused social sharing row.

Tip: if your product supports only two or three providers, remove the rest so the row stays compact and each button gets more visual weight.