Sign in with Google, in Google's own clothes.
Import it from rei-kit:
import { GoogleButton } from 'rei-kit'
Open GoogleButton in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { GoogleButton } from 'rei-kit'
function signInWithGoogle() {
// …
}
</script>
<template>
<GoogleButton label="Continue with Google" @click="signInWithGoogle" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | |
disabled | boolean | false | Greyed out and unclickable while a sign-in is already in flight. A real prop rather than a fallthrough attribute: the button needs to look disabled as well as be it, and a bare `disabled` landing on the element by itself gets the second half only. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.