---
title: Sign-in Button
description: A button that signs someone in with Google, Apple, Facebook, PayPal or Amazon, drawn the way each service asks, with the logo your application provides.
visibility: guest
draft: false
---

# 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](https://laravel.com/docs/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.

:::preview{title="The services in a stack"}
<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`:

```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](https://developers.google.com/identity/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.

:::preview{title="Signing in and signing up"}
<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.

| Service | Variants | Default |
| --- | --- | --- |
| Google | `auto`, `light`, `dark`, `neutral` | `auto`: light on a light page, dark on a dark one |
| Apple | `auto`, `black`, `white`, `outline` | `auto`: black on a light page, white on a dark one, as Apple asks |
| Facebook | `white`, `blue` | `white` |
| PayPal | `blue`, `gray` | `blue` |

:::preview{title="Each service's looks"}
<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](/theming/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.

```blade
<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:

```blade
<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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `service` | string | — | `google`, `apple`, `facebook`, `paypal` or `amazon` |
| `href` | string\|null | `null` | The route that starts the sign-in. Without it the component is a `<button>` |
| `action` | string | `'continue'` | The words: `continue`, `sign-in` or `sign-up` |
| `variant` | string\|null | `null` | A look the service allows, see [Variants](#variants). Unset, the service's first |
| `logo` | string\|null | `null` | The logo's URL for this button. Unset, `wirekit.sign_in.logos.<service>` |
| `label` | string\|null | `null` | The words, in place of the ones `action` gives |
| `pill` | bool | `false` | Round ends, which Google and PayPal offer |
| `block` | bool | `true` | As wide as its container. `false`: as wide as its words |
| `scope` | string\|null | `null` | Scoped personalization key |

## 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](#variants).

## Keyboard Interaction

| Key | Action |
| --- | --- |
| `Tab` | Moves the focus to the button, which shows the kit's focus ring |
| `Enter` | Follows the link to the service; on a button without `href`, runs its action |
| `Space` | Runs the action of a button without `href` |