SocialProfileItem

Clickable social media profile link with icon, platform name, URL, and external link indicator. Includes hover and focus states.

When to use

check_circleWhen to use

  • In profile dropdowns or sidebars
  • For showing linked social profiles
  • When you need to display platform name and URL
  • In expandable profile sections

cancelWhen not to use

  • For simple icon-only social links (use SocialIcons)
  • For primary navigation
  • When space is limited

Different Platforms

Examples

LinkedIn

linkedin.com/in/lukasvilkus

arrow_outward
Default

Medium

medium.com/@lukasvilkus

arrow_outward
Default

Emplifi

emplifi.io/team/lukas

arrow_outward
Default

States

Hover

LinkedIn

linkedin.com/in/lukasvilkus

arrow_outward
Hover

Focus

LinkedIn

linkedin.com/in/lukasvilkus

arrow_outward
Focus

Usage

tsx
import { SocialProfileItem } from '@/components/SocialProfileItem';

<SocialProfileItem 
  name="LinkedIn" 
  url="linkedin.com/in/lukasvilkus"
  type="linkedin"
  href="https://linkedin.com/in/lukasvilkus"
/>

<SocialProfileItem 
  name="Medium" 
  url="medium.com/@lukasvilkus"
  type="medium"
  href="https://medium.com/@lukasvilkus"
/>

Props

PropTypeDefaultDescription
name*string—Platform name (e.g., "LinkedIn")
url*string—Display URL or handle
type'logo' | 'linkedin' | 'medium' | 'emplifi' | 'chodilove''logo'Social platform type for icon
hrefstring—Link destination URL

Accessibility

  • Uses semantic <a> element for links
  • External links include arrow indicator
  • Focus state is clearly visible
  • Icons have aria-hidden="true"