Back to components
Playground

Social Media Components

Sizes

Variants

Shapes

Groups

Horizontal

Vertical

Usage Examples

Basic Link

<SocialMediaLink platform="facebook" url="https://facebook.com" />

Sizes

<SocialMediaLink platform="twitter" size="sm" url="#" />
<SocialMediaLink platform="twitter" size="md" url="#" />
<SocialMediaLink platform="twitter" size="lg" url="#" />

Variants

<SocialMediaLink platform="instagram" variant="filled" url="#" />
<SocialMediaLink platform="instagram" variant="outline" url="#" />
<SocialMediaLink platform="instagram" variant="ghost" url="#" />
<SocialMediaLink platform="instagram" variant="solid" url="#" />
<SocialMediaLink platform="instagram" variant="subtle" url="#" />
<SocialMediaLink platform="instagram" variant="minimal" url="#" />

Shapes

<SocialMediaLink platform="linkedin" shape="circle" url="#" />
<SocialMediaLink platform="linkedin" shape="square" url="#" />
<SocialMediaLink platform="linkedin" shape="rounded" url="#" />
<SocialMediaLink platform="linkedin" shape="soft" url="#" />

Group Example

<SocialMediaGroup
  links={[
    { platform: "facebook", url: "#" },
    { platform: "twitter", url: "#" },
    { platform: "instagram", url: "#" },
  ]}
/>