Social Button

Platform-branded buttons for social authentication and payment integrations with official brand colors and styling.

Key Features

Platform Branding, Official brand colors for 18+ social and payment platforms
Flexible Syntax, Positional or keyword arguments for clean code
Icon Support, Default platform icons with customization and color override
OAuth Integration, Built-in support for OAuth flows and external links
Size & Shape Options, Six sizes and four shape variants
Icon-Only Mode, Compact buttons showing only platform icons
States, Loading and disabled states with proper ARIA attributes
Link or Form, Automatically renders as link (GET) or form (POST/PATCH/PUT/DELETE)
Accessibility, Comprehensive ARIA labels and keyboard navigation
Good for Social Authentication: OAuth/Sign in with Google, GitHub, Facebook, etc.
Good for Payment Integration: PayPal, Stripe, Apple Pay, Google Pay checkouts
Good for Account Connections: Connect/disconnect social accounts
Good for Social Sharing: Share content on social platforms

Basic Usage


<%= rui_social_button(:google) %>

<%= rui_social_button(:google, "Continue with Google") %>

<%= rui_social_button(:google, "Continue with Google", size: :lg, full_width: true) %>

Recommended: Use positional arguments for cleaner, more concise code.

Icon Customization

Some platforms use generic Lucide icons as placeholders. You can easily override them with official brand logos:


<%= rui_social_button(:google) do |button| %>
  <% button.with_icon(name: "your-custom-google-logo") %>
<% end %>

Default Icons: The component uses Lucide icons by default. Platforms like GitHub, Facebook, Apple, and LinkedIn have exact icon matches. Others (Google, Discord, PayPal, etc.) use generic fallbacks like chrome, message-circle, and wallet.

For production: Consider adding official brand SVG assets to your project and using the icon slot to override defaults with pixel-perfect brand logos.

Social Platforms

Each platform uses its official brand colors and default text.

Google

<%= rui_social_button(:google) %>

GitHub

<%= rui_social_button(:github) %>

Facebook

<%= rui_social_button(:facebook) %>

Apple

<%= rui_social_button(:apple) %>

Twitter (Classic)

<%= rui_social_button(:twitter) %>

X (formerly Twitter)

<%= rui_social_button(:x) %>

Microsoft

<%= rui_social_button(:microsoft) %>

<%= rui_social_button(:linkedin) %>

Discord

<%= rui_social_button(:discord) %>

Note: All buttons use official brand colors and default text (e.g., "Sign in with Google"). You can override the text with the text: parameter.

Payment Platforms

Perfect for checkout flows and payment method selection.

PayPal

<%= rui_social_button(:paypal) %>

Stripe

<%= rui_social_button(:stripe) %>

Apple Pay

<%= rui_social_button(:apple_pay) %>

Google Pay

<%= rui_social_button(:google_pay) %>

Bitcoin

<%= rui_social_button(:bitcoin) %>

Ethereum

<%= rui_social_button(:ethereum) %>

Visa

<%= rui_social_button(:visa) %>

Mastercard

<%= rui_social_button(:mastercard) %>

American Express

<%= rui_social_button(:amex) %>

Sizes & Shapes

Sizes

Six standard sizes from extra small to extra large.

<%= rui_social_button(platform: :google, size: :xs) %>
<%= rui_social_button(platform: :google, size: :sm) %>
<%= rui_social_button(platform: :google, size: :base) %>
<%= rui_social_button(platform: :google, size: :lg) %>
<%= rui_social_button(platform: :google, size: :xl) %>

Shapes

Four shape options: rounded (default), pill, square, and circle.

<%= rui_social_button(platform: :github, shape: :rounded) %>
<%= rui_social_button(platform: :github, shape: :pill) %>
<%= rui_social_button(platform: :github, shape: :square) %>

Icon Only Mode

Perfect for compact layouts and toolbars. Icons automatically adjust to square dimensions.

<%= rui_social_button(platform: :google, icon_only: true) %>
<%= rui_social_button(platform: :github, icon_only: true) %>
<%= rui_social_button(platform: :facebook, icon_only: true) %>

Icon Only with Circle Shape

<%= rui_social_button(platform: :google, icon_only: true, shape: :circle) %>

Full Width Buttons

Make buttons span their container width. Perfect for authentication pages.

<div class="max-w-md space-y-3">
  <%= rui_social_button(platform: :google, full_width: true) %>
  <%= rui_social_button(platform: :github, full_width: true) %>
  <%= rui_social_button(platform: :apple, full_width: true) %>
</div>

OAuth Links

Use the path: parameter to make buttons functional for OAuth flows.


<%= rui_social_button(platform: :google, path: "/auth/google") %>

<%= rui_social_button(platform: :facebook, path: "/auth/facebook", method: :post) %>

<%= rui_social_button(
  platform: :twitter,
  path: "https://twitter.com/intent/tweet?text=...",
  external: true
) %>

Note: The component automatically renders as <a> for GET requests and <form><button> for POST/PATCH/PUT/DELETE requests, just like Rails' button_to helper.

States

Disabled State

Disabled buttons have reduced opacity and cannot be clicked.

<%= rui_social_button(platform: :google, disabled: true) %>
<%= rui_social_button(platform: :github, text: "Already Connected", disabled: true) %>

Loading State

Loading buttons display an animated spinner.

<%= rui_social_button(platform: :apple, loading: true) %>
<%= rui_social_button(platform: :google, text: "Connecting...", loading: true) %>

Real-World Examples

Social Authentication Page

Sign in to your account

Or continue with email

Email form would go here

Payment Method Selection

Choose payment method

Or pay with card

Social Sharing Buttons

Accessibility

The SocialButton component follows WAI-ARIA best practices and includes semantic HTML for optimal accessibility.

ARIA Attributes

Automatic aria-label with platform name when using icon-only buttons
Uses role="button" for proper interactive semantics
SVG icons include aria-hidden="true" to prevent redundant announcements

Keyboard Navigation

Tab to navigate between social buttons
Enter or Space to activate the button
Visible focus indicators with platform-appropriate colors

Semantic HTML

Uses native <button> or <a> elements based on usage
Platform text labels provide clear identification of the service
Supports custom text for action-specific labeling ("Sign in with Google")

Screen Reader Support

Platform icons are decorative when text is present, hidden from screen readers
Icon-only buttons automatically announce platform name (e.g., "Google", "GitHub")
Custom text attribute provides context for the action

API Reference

rui_social_button

Platform-branded buttons for OAuth, social sharing, and payment integrations

Parameter	Type	Default	Description
platform*	Symbol	—	Platform identifier (see Supported Platforms)
url	String	—	Button URL (positional or keyword)

Supported Platforms

Available platform identifiers with brand colors

Parameter	Type	Default	Description
OAuth	Symbol	—	:google, :apple, :facebook, :twitter, :github, :linkedin, :microsoft, :amazon
Social	Symbol	—	:instagram, :tiktok, :youtube, :twitch, :discord, :slack, :reddit
Payment	Symbol	—	:stripe, :paypal, :shopify, :square
Other	Symbol	—	:spotify, :dropbox, :figma, :notion, :email

Appearance

Visual styling options

Parameter	Type	Default	Description
variant	Symbol	`:solid`	Visual style `:solid` `:outline` `:ghost`
size	Symbol	`:base`	Button size `:xs` `:sm` `:base` `:lg` `:xl`
shape	Symbol	`:rounded`	Border radius `:square` `:rounded` `:pill`
full_width	Boolean	`false`	Full width button

Text Customization

Button text options

Parameter	Type	Default	Description
text	String	—	Custom button text (overrides platform default)
text_prefix	String	—	Text prefix (e.g., 'Sign in with', 'Continue with')
icon_only	Boolean	`false`	Show only platform icon (no text)

States

State options

Parameter	Type	Default	Description
disabled	Boolean	`false`	Disable the button
loading	Boolean	`false`	Show loading spinner

Related Components

Icon

Lucide collection of SVG icons that can be embedded in other components

Button

Interactive controls with automatic form integration and auto-labeling.

ButtonTo

RESTful action buttons for DELETE/PATCH operations with confirmation dialogs