Site Social Links

Social Links

Where to follow along — icon buttons with their names for screen readers.

Preview

Ghost (default)

Outline

Usage

tsx

import { SocialLinks } from "zostel-ui";

<SocialLinks links={[{ platform: "instagram", url: "https://…" }, { platform: "youtube", url: "https://…" }]} />

Props

Prop	Type	Default	Description
`links`	`{ platform: "instagram" \| "youtube" \| "twitter" \| "facebook" \| "linkedin" \| "discord"; url }[]`	—	One button each; opens in a new tab.
`variant`	`"ghost" \| "outline" \| "default"`	`"ghost"`	Button look.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

links

Type: { platform: "instagram" | "youtube" | "twitter" | "facebook" | "linkedin" | "discord"; url }[]

Default: —

One button each; opens in a new tab.

variant

Type: "ghost" | "outline" | "default"

Default: "ghost"

Button look.

size

Type: "sm" | "md" | "lg"

Default: "md"

Button size.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).