🌴Ocean UI
Base components

Social Button

A simple and flexible social login button component that wraps the Button component, providing clean styling for social authentication flows. Pass any icon as children for maximum flexibility. Built with Ark UI factory for accessibility and styled using Ocean UI design tokens.

@ark-ui/react/factory

Example

How to install and use

1

Complete the manual installation setup

If you haven't already completed the first 4 steps of the manual installation guide, please do so before continuing to install these components.

2

Create a social-button.tsx file and paste the following code into it.

/components/ui/social-button.tsx

import { cva, type VariantProps } from "class-variance-authority";
import { ark } from "@ark-ui/react/factory";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const socialButtonVariants = cva(
  "inline-flex items-center justify-center gap-3 px-6 whitespace-nowrap rounded-lg text-sm font-semibold transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-white dark:bg-background border border-border text-foreground hover:bg-muted",
        filled:
          "bg-primary text-primary-foreground border-0 shadow-xs hover:bg-primary/90",
        dark: "bg-black text-white border-0 shadow-xs hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90",
        "icon-only":
          "bg-white dark:bg-background border border-border text-foreground hover:bg-muted aspect-square",
      },
      size: {
        sm: "min-h-8 [&_svg]:size-4",
        md: "min-h-9 [&_svg]:size-5",
        lg: "min-h-10 [&_svg]:size-5",
        xl: "min-h-11 [&_svg]:size-5",
        "icon-sm": "h-8 w-8 [&_svg]:size-4",
        "icon-md": "h-10 w-10 [&_svg]:size-5",
        "icon-lg": "h-12 w-12 [&_svg]:size-6",
      },
      fullWidth: {
        true: "w-full",
        false: "",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "sm",
      fullWidth: false,
    },
  },
);

export interface SocialButtonProps
  extends ComponentProps<typeof ark.button>,
    VariantProps<typeof socialButtonVariants> {
  children?: React.ReactNode;
}

function SocialButton({
  variant,
  size,
  fullWidth,
  className,
  children,
  ...props
}: SocialButtonProps) {
  // For icon-only variant, override size to use icon size variants
  const finalSize =
    variant === "icon-only" && size && !size.startsWith("icon-")
      ? (`icon-${size}` as "icon-sm" | "icon-md" | "icon-lg")
      : size;

  return (
    <ark.button
      type="button"
      data-slot="social-button"
      className={cn(
        socialButtonVariants({
          variant,
          size: finalSize,
          fullWidth,
          className,
        }),
      )}
      {...props}
    >
      {children}
    </ark.button>
  );
}

export { SocialButton, socialButtonVariants };
3

Finally, Choose any example you like and add it to your project.
For instance, create a new file at components/shared/{example-component-name}.tsx, paste the example code into that file, and then import and use the component wherever you need it in your application.

The SocialButton component wraps the Button component and uses Ark UI's factory function (ark.button) for built-in accessibility. It's styled with Tailwind CSS using Ocean UI design tokens from tokens.css.

Overview

A flexible button component for social login flows. Pass any icon and text as children for maximum customization. Built with Ark UI for accessibility.

Variants

The SocialButton component supports four visual variants:

  • default: Light background with border (default style) - variant="default" or no variant prop
  • filled: Solid background with primary color, no border - variant="filled"
  • dark: Black background with white text, perfect for Apple-style buttons - variant="dark"
  • icon-only: Square button with only an icon - variant="icon-only"

Sizes

The SocialButton component supports multiple sizes:

Text Button Sizes:

  • sm: Small button (size="sm") - min-height: 32px
  • md: Medium button (size="md") - min-height: 36px - default
  • lg: Large button (size="lg") - min-height: 40px
  • xl: Extra large button (size="xl") - min-height: 44px

Icon-Only Button Sizes:

  • icon-sm: Small square (size="icon-sm") - 32x32px
  • icon-md: Medium square (size="icon-md") - 40x40px
  • icon-lg: Large square (size="icon-lg") - 48x48px

Features

  • Simple API: Just pass icon and text as children - no complex props needed
  • Flexible Icons: Use any icon component (SVG, Lucide React, custom components)
  • Multiple Variants: Default, filled, dark, and icon-only styles
  • Size Control: Use size prop to control button height and icon size
  • Full Width: Use fullWidth={true} for buttons that span the container width
  • Disabled State: Use disabled prop for non-interactive buttons
  • Accessibility: Full keyboard navigation and ARIA support via Ark UI
  • Icon-Only Accessibility: Icon-only buttons require aria-label prop for screen reader support
  • Customizable: All styles can be overridden via className prop

Select Examples

Filled Variant

Filled variant buttons use variant="filled" to display a solid background with primary color and no border. Perfect for prominent social login actions that need to stand out.

Props used: variant="filled"

Icon Only Variant

Icon-only buttons use variant="icon-only" with size="icon-md" to create square buttons containing only an icon. Perfect for compact interfaces or when space is limited.

Important: Since icon-only buttons have no visible text, you must provide an aria-label prop so screen readers can announce what the button does. Buttons with text content don't need aria-label as the text serves as the accessible name.

Props used: variant="icon-only", size="icon-md",

Full Width Buttons

Full width buttons use fullWidth={true} to span the entire width of their container. Ideal for mobile interfaces or when you want maximum button prominence. Can be combined with any variant.

Props used: fullWidth={true}, variant="filled" (optional)

Disabled State

Disabled social buttons use the disabled prop to make them non-interactive. They maintain their visual style but appear faded and cannot be clicked. Useful when authentication is temporarily unavailable.

Props used: disabled

Button

A versatile button component for triggering actions and navigating interfaces.

App Store Button

A flexible button component for mobile app store download links with customizable icons and text.

On this page

Social ButtonExampleHow to install and useOverviewVariantsSizesFeaturesSelect ExamplesFilled VariantIcon Only VariantFull Width ButtonsDisabled State