SocialButton

A button component styled specially for social logins.
alphaView source

Import the addon stylesheet before using addon components:

css
@import "@typlog/ui/addons";
vue
<script setup lang="ts">
import { SocialButton } from '@typlog/ui/addons'
</script>

<template>
  <div class="flex items-center gap-2">
    <SocialButton brand="google">Sign in with Google</SocialButton>
  </div>
</template>

API Reference ​

PropDefaultType
brand
–
BrandType
disabled
–
boolean
radius
–
"none""small""medium""large""full"
size"2"
"1""2""3""4"

Control the size of the social button.

variant"classic"
Enum

Examples ​

Brand ​

vue
<script setup lang="ts">
import { SocialButton } from '@typlog/ui/addons'
</script>

<template>
  <div class="flex items-center flex-wrap gap-2">
    <SocialButton brand="google">Sign in with Google</SocialButton>
    <SocialButton brand="github">Sign in with GitHub</SocialButton>
    <SocialButton brand="facebook">Sign in with Facebook</SocialButton>
    <SocialButton brand="x">Sign in with X</SocialButton>
    <SocialButton brand="apple">Sign in with Apple</SocialButton>
    <SocialButton brand="slack">Sign in with Slack</SocialButton>
    <SocialButton brand="figma">Sign in with Figma</SocialButton>
  </div>
</template>

Size ​

vue
<script setup lang="ts">
import { SocialButton } from '@typlog/ui/addons'
</script>

<template>
  <div class="flex items-center flex-wrap gap-2">
    <SocialButton brand="google" size="1">Sign in with Google</SocialButton>
    <SocialButton brand="google" size="2">Sign in with Google</SocialButton>
    <SocialButton brand="google" size="3">Sign in with Google</SocialButton>
    <SocialButton brand="google" size="4">Sign in with Google</SocialButton>
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { SocialButton } from '@typlog/ui/addons'
</script>

<template>
  <div class="flex items-center flex-wrap gap-2">
    <SocialButton brand="google" variant="classic">Sign in with Google</SocialButton>
    <SocialButton brand="google" variant="solid">Sign in with Google</SocialButton>
    <SocialButton brand="google" variant="soft">Sign in with Google</SocialButton>
    <SocialButton brand="google" variant="surface">Sign in with Google</SocialButton>
    <SocialButton brand="google" variant="outline">Sign in with Google</SocialButton>
  </div>
</template>

Radius ​

vue
<script setup lang="ts">
import { SocialButton } from '@typlog/ui/addons'
</script>

<template>
  <div class="flex items-center flex-wrap gap-2">
    <SocialButton brand="google" radius="none">Sign in with Google</SocialButton>
    <SocialButton brand="google" radius="small">Sign in with Google</SocialButton>
    <SocialButton brand="google" radius="medium">Sign in with Google</SocialButton>
    <SocialButton brand="google" radius="large">Sign in with Google</SocialButton>
    <SocialButton brand="google" radius="full">Sign in with Google</SocialButton>
  </div>
</template>
Last updated Sep 15, 2026
ToastTurnstile