Social Share Button
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { SocialShareButton } from "@corew500/ui/social-share-button"
<SocialShareButton>Content</SocialShareButton>Variants
socialShareButtonVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultoutlineghost | default |
| size | smmdlgicon | md |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| platform* | enum | — | Social platform to share to |
| url* | string | — | URL to share |
| title | string | — | Share title/text (used for Twitter title, Email subject) |
| hashtag | string | — | Facebook hashtag (include the #) |
| body | string | — | Email body text |
| icon | enum | — | Custom icon to override the default platform icon |
| hideIcon | enum | false | Hide the icon completely |
| className | string | — | Additional CSS classes |
| variant | enum | default | — |
| size | enum | md | — |
Accessibility
Keyboard Navigation
- Keyboard accessible via standard button interaction
Focus Management
- Focus states use ring tokens for visibility
Screen Readers
- - Platform icons include aria-hidden="true" as they are decorative
- Button text provides accessible name for screen readers
Additional
- For icon-only buttons, the platform label is still rendered but visually hidden
Localization
Translatable Content
- - Default platform labels ("Twitter", "Facebook", etc.) are English
- Pass translated text via children prop to localize button labels
- The `title` prop should contain translated share text
- Email `body` and `subject` (title) should be pre-translated