Socials
Demo
Props
| Prop | Type | Description |
|---|
items | SocialItem[] | An array of social items, each with an icon and a link to the social media platform. |
variant | 'default' | 'outline' | 'secondary' | 'destructive' | 'link' | 'ghost' (optional) | The style variant of the buttons. |
classNames | { root?: string; button?: string; icon?: string } (optional) | Custom class names for the social buttons and their icons. |
SocialItem
| Property | Description | Type |
|---|
| icon | The icon representing the social media platform. | LucideIcon |
| href | The URL link to the social media page. | string |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall layout of the social buttons.button: CSS class for styling each social button.icon: CSS class for styling the social icons within the buttons.
Functionality
- The Socials component is designed for showcasing a series of social media links through interactive icons.
- Each icon is wrapped in a button, providing a consistent and accessible user experience.
- Ideal for footers, sidebars, or any section where social media links are displayed.