Sign-in Button

<x-wirekit::sign-in-button> is the button that signs someone in with another service: Google, Apple, Facebook, PayPal or Amazon. Each service sets out how its button looks, its colors, the words on it and where its logo sits, and each button follows its service's rules, so a page that offers all five shows them side by side without one looking out of place.

Basic Usage

service names the service and href the route that starts the sign-in with it, usually the redirect of Laravel Socialite. The button is as wide as its container, the way a sign-in page stacks them, and says "Continue with" and the service's name.

<x-wirekit::stack gap="sm" style="max-width: 20rem">
    <x-wirekit::sign-in-button service="google" href="/auth/google/redirect" />
    <x-wirekit::sign-in-button service="apple" href="/auth/apple/redirect" />
    <x-wirekit::sign-in-button service="facebook" href="/auth/facebook/redirect" />
    <x-wirekit::sign-in-button service="paypal" href="/auth/paypal/redirect" />
</x-wirekit::stack>

The Logos

WireKit ships no logo of these services. Each of them asks that its button carries its own artwork, downloaded from its own brand page under its own terms, and Amazon asks for its own button images. Download each logo you need once, put it where your pages load images from, and name it in config/wirekit.php:

// config/wirekit.php
'sign_in' => [
    'logos' => [
        // 1. Google's "G", from the assets of its branding guidelines
        'google' => '/images/sign-in/google.svg',
        // 2. Apple's logo for a button with words, from Apple Design Resources
        'apple' => '/images/sign-in/apple.svg',
        // 3. The "f" logo, from Meta's brand resource center
        'facebook' => '/images/sign-in/facebook.svg',
        // 4. The PayPal monogram, from PayPal's logos and marks
        'paypal' => '/images/sign-in/paypal.svg',
        // 5. Amazon's whole button image, from its Login with Amazon button guidelines
        'amazon' => '/images/sign-in/amazon.png',
    ],
],

Where each one comes from:

• Google: the Sign in with Google branding guidelines. The "G" stays in its colors, at the size the button gives it.
• Apple: Apple Design Resources, the logo for a button with a title. Its file carries its own padding and is as tall as the button, as Apple's Human Interface Guidelines for Sign in with Apple ask.
• Facebook: the logo pack of the Facebook brand resources in Meta's brand resource center.
• PayPal: the monogram from PayPal's logos and marks, as the button design guide of Log in with PayPal names it.
• Amazon: a button image from the Login with Amazon button guidelines. Amazon allows its own buttons only, so for Amazon the file is the whole button.

A service with no logo set shows its words alone. logo on the tag names a logo for one button, in place of the config.

Words

action chooses the words: continue ("Continue with Google", the default), sign-in ("Sign in with Google") or sign-up ("Sign up with Google"). Meta and PayPal name their own words for signing in, "Log in with", and none for signing up, so there sign-up continues. The words are translated with the rest of the kit; label replaces them for one button.

<x-wirekit::stack gap="sm" style="max-width: 20rem">
    <x-wirekit::sign-in-button service="google" action="sign-in" href="/auth/google/redirect" />
    <x-wirekit::sign-in-button service="apple" action="sign-up" href="/auth/apple/redirect" />
    <x-wirekit::sign-in-button service="paypal" action="sign-in" href="/auth/paypal/redirect" />
</x-wirekit::stack>

Variants

variant chooses among the looks a service allows, and each service's first is the default. Amazon has none: its button image is its look.

<x-wirekit::grid cols="1 sm:2" gap="sm">
    <x-wirekit::sign-in-button service="google" variant="light" href="/auth/google/redirect" />
    <x-wirekit::sign-in-button service="google" variant="neutral" href="/auth/google/redirect" />
    <x-wirekit::sign-in-button service="apple" variant="black" href="/auth/apple/redirect" />
    <x-wirekit::sign-in-button service="apple" variant="outline" href="/auth/apple/redirect" />
    <x-wirekit::sign-in-button service="facebook" variant="white" href="/auth/facebook/redirect" />
    <x-wirekit::sign-in-button service="facebook" variant="blue" href="/auth/facebook/redirect" />
    <x-wirekit::sign-in-button service="paypal" variant="blue" href="/auth/paypal/redirect" />
    <x-wirekit::sign-in-button service="paypal" variant="gray" href="/auth/paypal/redirect" />
</x-wirekit::grid>

Facebook's white button comes first because of contrast: white words on Meta's blue, #1877f2, read at 4.23:1, short of the 4.5:1 that text of this size needs. variant="blue" gives Meta's blue for a page that takes that trade. The colors are tokens, listed with the design tokens under "Sign-in Buttons"; they are the services' colors, so a preset leaves them alone.

pill gives the button round ends, a shape Google and PayPal offer. Without it the button takes the kit's corners, which Apple asks for: the corners of the other buttons on the page.

Amazon

Amazon allows its own button images only, so with its image set the image is the button, at the size the image has. Choose the image whose size and color suit the page from Amazon's guidelines; the button's words, "Login with Amazon", are what a screen reader reads for it.

<x-wirekit::sign-in-button service="amazon" href="/auth/amazon/redirect" />

Without a Link

Without href the component is a <button>, for a sign-in that a Livewire action starts:

<x-wirekit::sign-in-button service="google" wire:click="signInWith('google')" />

block="false" keeps the button as wide as its words, for a row of buttons.

Props

Accessibility

• The button is a link, or a <button> without href, named by its words. The logo beside them is hidden from a screen reader, since the words already name the service.
• For Amazon the image is the button, and its alternative text is the button's words.
• The focus ring is the kit's, outside the button, so it shows on every service's colors.
• A link opened in a new tab with target="_blank" carries rel="noopener noreferrer", and its words end with a visually hidden "(opens in new tab)".
• Google's, Apple's and PayPal's words read at 4.5:1 or more on their fills. Facebook's white button does too; its blue one reads at 4.23:1, see Variants.

Keyboard Interaction