PhiaUi.Components.SocialButton (phia_ui v0.1.17)

Copy Markdown View Source

Platform-branded OAuth / social sign-in buttons.

Provides social_button/1 for individual providers and social_button_group/1 for stacking multiple social buttons together.

Brand colors are applied via inline style attributes to keep the CSS bundle minimal and to avoid Tailwind purging arbitrary color classes.

Supported providers

:google, :github, :apple, :twitter, :facebook, :discord, :linkedin, :microsoft, :slack, :custom

For :custom, render your own icon via the :icon slot.

Variants

VariantAppearance
:brandedFull brand color background + white text
:outlineBorder with bg-background, no brand fill
:ghostTransparent, no border

Example

<.social_button_group>
  <.social_button provider={:google} />
  <.social_button provider={:github} />
  <.social_button provider={:apple} />
</.social_button_group>

<.social_button provider={:google} label="Continue with Google" variant={:outline} />

<.social_button provider={:github} icon_only={true} size={:lg} />

<.social_button provider={:custom}>
  <:icon>
    <svg>...</svg>
  </:icon>
</.social_button>

Summary

Functions

social_button(assigns)

Renders a platform-branded social sign-in button.

social_button_group(assigns)

Renders a group of social sign-in buttons with consistent spacing.

Functions

social_button(assigns)

Renders a platform-branded social sign-in button.

Brand colors are applied via style to avoid Tailwind arbitrary color issues. The monochrome SVG icon inherits color from the button.

Attributes

  • provider (:atom) (required) - OAuth provider — controls brand color and icon. Must be one of :google, :github, :apple, :twitter, :facebook, :discord, :linkedin, :microsoft, :slack, or :custom.
  • label (:string) - Override the default 'Sign in with X' label. Use nil for the default. Defaults to nil.
  • variant (:atom) - Visual style — :branded fills with brand color. Defaults to :branded. Must be one of :branded, :outline, or :ghost.
  • size (:atom) - Button size. Defaults to :default. Must be one of :sm, :default, or :lg.
  • icon_only (:boolean) - When true, the text label is visually hidden (sr-only) but still accessible. Defaults to false.
  • loading (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - Custom icon slot — only used when provider={:custom}.

social_button_group(assigns)

Renders a group of social sign-in buttons with consistent spacing.

Attributes

  • orientation (:atom) - Stack direction — :vertical (default) or :horizontal. Defaults to :vertical. Must be one of :horizontal, or :vertical.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - social_button components.