Skip to content
Brok UI

Loading…

No results

Social Links

Open source

A cluster of social profile links as either a compact row of icon buttons or a vertical labelled list, with currentColor brand marks (X, GitHub, LinkedIn, Instagram, Facebook, YouTube, Dribbble, TikTok, Threads, Bluesky, Mastodon, Discord, Pinterest, WhatsApp, Telegram, Reddit, Twitch, email), a custom `icon` per link, and md/full button shapes — no raw brand colour.

Source Open issues Report a bug
Version
v1.2.2
Stability
stable
License
MIT
Related
Card
Twitter Card
Reaction Bar

Preview

previews.components.social-links.default.blade.php Blade 
{{-- The default set, then every built-in mark. `links` takes `platform`, `label`, `href`. --}}
@php
    $platforms = ['x', 'github', 'linkedin', 'instagram', 'facebook', 'youtube', 'tiktok', 'threads', 'bluesky', 'mastodon', 'discord', 'pinterest', 'whatsapp', 'telegram', 'reddit', 'twitch', 'dribbble', 'email'];
    $all = collect($platforms)->map(fn ($platform) => ['platform' => $platform, 'label' => ucfirst($platform), 'href' => '#'])->all();
@endphp

<div class="flex w-full max-w-md flex-col items-center gap-6">
    <x-ui.social-links />
    <x-ui.social-links :links="$all" label="All marks" class="justify-center" />
</div>

Installation

terminal 
php artisan ui:add social-links

Registry contract

php artisan ui:add social-links writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

  • blade resources/views/components/ui/social-links.blade.php
Registry dependencies
None — installs on its own.
Packages
composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

social-links.md 
# Brok UI: Social Links (`social-links`)

A cluster of social profile links as either a compact row of icon buttons or a vertical labelled list, with currentColor brand marks (X, GitHub, LinkedIn, Instagram, Facebook, YouTube, Dribbble, TikTok, Threads, Bluesky, Mastodon, Discord, Pinterest, WhatsApp, Telegram, Reddit, Twitch, email), a custom `icon` per link, and md/full button shapes — no raw brand colour.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add social-links
```

## Usage

```blade
{{-- The default set, then every built-in mark. `links` takes `platform`, `label`, `href`. --}}
@php
    $platforms = ['x', 'github', 'linkedin', 'instagram', 'facebook', 'youtube', 'tiktok', 'threads', 'bluesky', 'mastodon', 'discord', 'pinterest', 'whatsapp', 'telegram', 'reddit', 'twitch', 'dribbble', 'email'];
    $all = collect($platforms)->map(fn ($platform) => ['platform' => $platform, 'label' => ucfirst($platform), 'href' => '#'])->all();
@endphp

<div class="flex w-full max-w-md flex-col items-center gap-6">
    <x-ui.social-links />
    <x-ui.social-links :links="$all" label="All marks" class="justify-center" />
</div>
```

## Props

- `links` (mixed|null, default `null`)
- `layout` (string, default `row`)
- `size` (sm|lg, default `md`)
- `variant` (string, default `ghost`)
- `shape` (string, default `md`)
- `label` (string, default `Social links`)

## Use when

- Use to orient users and help them move across pages, sections, or commands.
- Listing social profiles in a footer, bio or team card.
- Rendering brand marks in currentColor so they follow the theme.

## Avoid when

- Do not hide primary wayfinding in novelty interactions or deep nested structures if straightforward navigation would be clearer.
- Sharing the current page; use reaction-bar's share action instead, since this links to profiles, not share intents.
- Brand-coloured icons: the marks are deliberately monochrome.

## Anti-patterns

- Hiding primary wayfinding in novelty interactions

## Rules

- Use the `<brok:social-links>` tag (or `<x-ui.social-links>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/social-links
- Registry JSON (files, props, contract): https://brokui.dev/r/open/social-links.json
Ask about Social Links in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

List

Open the List example in a new tab
list.blade.php Blade 
<div class="flex w-full justify-center">
    <x-ui.social-links layout="list" />
</div>

Outline

Open the Outline example in a new tab
outline.blade.php Blade 
<div class="flex w-full justify-center">
    <x-ui.social-links variant="outline" />
</div>

Platforms

Open the Platforms example in a new tab
platforms.blade.php Blade 
{{-- Round outline buttons (`shape="full"`), and a link that brings its own `icon`
     markup for a platform outside the built-in map. --}}
@php
    $links = [
        ['platform' => 'x', 'label' => 'X', 'href' => '#'],
        ['platform' => 'bluesky', 'label' => 'Bluesky', 'href' => '#'],
        ['platform' => 'threads', 'label' => 'Threads', 'href' => '#'],
        ['platform' => 'tiktok', 'label' => 'TikTok', 'href' => '#'],
        ['platform' => 'rss', 'label' => 'RSS', 'href' => '#', 'icon' => '<path d="M4 11a9 9 0 0 1 9 9H4zm0-7a16 16 0 0 1 16 16h-3A13 13 0 0 0 4 7zm1.5 12.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>'],
    ];
@endphp

<div class="flex w-full justify-center">
    <x-ui.social-links :links="$links" shape="full" variant="outline" />
</div>

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop Type Default Description
links mixed | null null
layout string row
size sm | lg md
variant string ghost
shape string md
label string Social links

Slots

  • default —

Data slots

Stable hooks for CSS overrides and browser tests.

social-links

Behavior

  • layout switches between a row of icon buttons and a vertical labelled list; size, variant and shape follow the button primitive.
  • Each link picks its mark by platform, or supplies a custom icon.
  • Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Navigation and orientation

Orient users and move between destinations.

Use when

  • Use to orient users and help them move across pages, sections, or commands.
  • Listing social profiles in a footer, bio or team card.
  • Rendering brand marks in currentColor so they follow the theme.

Avoid when

  • Do not hide primary wayfinding in novelty interactions or deep nested structures if straightforward navigation would be clearer.
  • Sharing the current page; use reaction-bar's share action instead, since this links to profiles, not share intents.
  • Brand-coloured icons: the marks are deliberately monochrome.

Use instead

  • Visible links and local navigation

Anti-patterns

  • Hiding primary wayfinding in novelty interactions
Anatomy
root
Theming hooks
social-links

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode
Keyboard
native
Focus
native
  • The cluster is labelled by label, and each icon-only link carries the platform name as its accessible name.
  • Marks are aria-hidden so a link is announced once.
  • Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
  • Focus-visible rings use the ring token, so keyboard focus is always visible.
  • Disabled and invalid states are conveyed to assistive tech, not by color alone.
  • Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
  • Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
  • Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Validation

Validation support: native. Keep the error message connected with aria-describedby.

livewire-form.blade.php Blade 
<form wire:submit="save" class="space-y-2">
    <brok:social-links
        wire:model="value"
        :aria-invalid="$errors->has('value') ? 'true' : 'false'"
        aria-describedby="value-error"
    />

    @error('value')
        <p id="value-error" role="alert">{{ $message }}</p>
    @enderror

    <brok:button type="submit" wire:loading.attr="disabled">
        <span wire:loading.remove>Save</span>
        <span wire:loading>Saving…</span>
    </brok:button>
</form>

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/social-links.blade.php Blade 
@props([
    'links' => null,
    'layout' => 'row',
    'size' => 'md',
    'variant' => 'ghost',
    'shape' => 'md',
    'label' => 'Social links',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // A cluster of social profile links — either a compact horizontal row of
    // icon buttons (`row`) or a vertical labelled list (`list`). Brand marks are
    // rendered with fill="currentColor" so no raw brand colour ever ships. A link
    // may carry its own `icon` (inner SVG markup for a 24×24 currentColor mark)
    // for a platform that is not in the map.
    $glyphs = [
        'x' => '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.742l7.726-8.835L1.254 2.25H8.08l4.263 5.632 5.901-5.632Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/>',
        'github' => '<path d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.185 6.839 9.51.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.091-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482C19.138 20.204 22 16.448 22 12.021 22 6.484 17.523 2 12 2Z"/>',
        'linkedin' => '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z"/>',
        'instagram' => '<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/>',
        'facebook' => '<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>',
        'youtube' => '<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z"/>',
        'dribbble' => '<path d="M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12c6.603 0 12-5.385 12-12S18.603 0 12 0zm9.885 11.441c-2.575-.422-4.943-.445-7.103-.073-.244-.563-.497-1.125-.767-1.68 2.31-1.058 4.226-2.752 5.495-4.965a9.812 9.812 0 0 1 2.375 6.718zM12 2.166c2.405 0 4.612.859 6.328 2.288-1.18 2.05-2.948 3.564-5.082 4.484-1.32-2.428-2.737-4.4-4.252-5.84A9.819 9.819 0 0 1 12 2.166zm-5.629 1.45c1.5 1.41 2.92 3.358 4.247 5.792-2.97.802-6.27 1.142-9.87 1.011a9.866 9.866 0 0 1 5.623-6.803zM2.108 12.182c3.95.165 7.61-.224 10.9-1.158.248.475.483.957.701 1.445-3.421 1.045-6.378 3.144-8.798 6.26a9.81 9.81 0 0 1-2.803-6.547zm3.85 8.131c2.224-2.94 4.92-4.911 8.073-5.875.998 2.6 1.75 5.305 2.24 8.103a9.795 9.795 0 0 1-10.313-2.228zm12.265 1.197c-.464-2.594-1.157-5.122-2.073-7.566 1.91-.292 3.961-.265 6.139.082a9.84 9.84 0 0 1-4.066 7.484z"/>',
        'tiktok' => '<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>',
        'threads' => '<path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/>',
        'bluesky' => '<path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/>',
        'mastodon' => '<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>',
        'discord' => '<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>',
        'pinterest' => '<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>',
        'whatsapp' => '<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>',
        'telegram' => '<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>',
        'reddit' => '<path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/>',
        'twitch' => '<path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>',
        'email' => '<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z"/><path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z"/>',
    ];

    $links ??= [
        ['platform' => 'x', 'label' => 'Follow on X', 'href' => '#'],
        ['platform' => 'github', 'label' => 'Follow on GitHub', 'href' => '#'],
        ['platform' => 'instagram', 'label' => 'Follow on Instagram', 'href' => '#'],
        ['platform' => 'linkedin', 'label' => 'Follow on LinkedIn', 'href' => '#'],
        ['platform' => 'facebook', 'label' => 'Follow on Facebook', 'href' => '#'],
    ];

    $isList = $layout === 'list';

    $iconBox = match ($size) {
        'sm' => 'size-4',
        'lg' => 'size-6',
        default => 'size-5',
    };

    // Row icon-button chrome (only used by the `row` layout).
    $radius = $shape === 'full' ? 'rounded-full' : 'rounded-md';
    $rowButton = $variant === 'outline'
        ? 'inline-flex items-center justify-center '.$radius.' border border-border bg-background p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none'
        : 'inline-flex items-center justify-center '.$radius.' p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none';

    // Resolve a link's glyph: its own `icon` markup wins, then the platform map.
    $glyphFor = fn (array $link) => $link['icon'] ?? $glyphs[$link['platform'] ?? 'x'] ?? $glyphs['x'];
@endphp

@if ($isList)
    <ul
        data-slot="social-links"
        data-layout="list"
        data-shape="{{ $shape }}"
        {{ $attributes->merge(['class' => 'flex flex-col gap-1 text-foreground', 'aria-label' => __($label)]) }}
    >
        @foreach ($links as $link)
            @php $platform = $link['platform'] ?? 'x'; @endphp
            <li>
                <a
                    href="{{ $link['href'] ?? '#' }}"
                    class="group/social inline-flex items-center gap-3 rounded-md py-2 text-sm text-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    @if (($link['href'] ?? '#') !== '#') target="_blank" rel="noopener noreferrer" @endif
                >
                    <svg class="{{ $iconBox }} shrink-0 text-muted-foreground transition-colors group-hover/social:text-foreground" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">{!! $glyphFor($link) !!}</svg>
                    <span>{{ __($link['label'] ?? ucfirst($platform)) }}</span>
                </a>
            </li>
        @endforeach
    </ul>
@else
    <ul
        data-slot="social-links"
        data-layout="row"
        data-shape="{{ $shape }}"
        {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-1 text-foreground', 'aria-label' => __($label)]) }}
    >
        @foreach ($links as $link)
            @php $platform = $link['platform'] ?? 'x'; @endphp
            <li>
                <a
                    href="{{ $link['href'] ?? '#' }}"
                    class="{{ $rowButton }} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    aria-label="{{ __($link['label'] ?? ucfirst($platform)) }}"
                    @if (($link['href'] ?? '#') !== '#') target="_blank" rel="noopener noreferrer" @endif
                >
                    <svg class="{{ $iconBox }} shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">{!! $glyphFor($link) !!}</svg>
                </a>
            </li>
        @endforeach
    </ul>
@endif

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.2.2
Status
Stable
License
open
Accessibility reviewed
No review date recorded
Last breaking change
No date recorded
Deprecation
Not deprecated
Contract
v6
Foundation
≥ 1.0.0