PetalComponents.SocialButton (petal_components v4.11.2)

Copy Markdown View Source

The provider sign-in button - "Continue with Google" and its siblings, so auth pages stop hand-rolling them.

<.social_button provider="google" href={~p"/auth/google"} class="w-full" />
<.social_button provider="github" variant="solid" href={~p"/auth/github"} />

Rides pc-button geometry (sizes, radius token, focus ring), so social buttons match every other button in the app and follow the theme. variant="outline" is the default - the neutral button with the brand's coloured glyph, today's convention. variant="solid" paints the provider's own background.

The label defaults to "Continue with {Provider}"; pass label for other copy ("Login with Google") or icon_only for compact rows - the label then becomes the accessible name.

A link when href/navigate/patch is set (OAuth flows are plain GETs to /auth/:provider), a button otherwise (phx-click works via the usual bindings).

Summary

Functions

social_button(assigns)

Functions

social_button(assigns)

Attributes

  • provider (:string) (required) - Must be one of "google", "github", "apple", "x", "facebook", "microsoft", "gitlab", "discord", or "linkedin".
  • variant (:string) - outline is the neutral button with the coloured glyph; solid paints the brand colour. Defaults to "outline". Must be one of "outline", or "solid".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • label (:string) - button text; defaults to "Continue with {Provider}". Defaults to nil.
  • icon_only (:boolean) - glyph only; the label becomes the accessible name. Defaults to false.
  • href (:string) - plain link target - OAuth flows are GETs. Defaults to nil.
  • navigate (:string) - Defaults to nil.
  • patch (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. phx-click and friends work here when rendered as a button. Supports all globals plus: ["method", "download", "target", "rel"].