Braid Design System

Guides Foundations Components Patterns Styles

Social share

Allows users to share content, such as a job ad or article, to their social networks or with specific individuals.

Appearance

Anatomy

Open in Playroom

MenuRenderer: A single share menu, aligned left or right of the trigger
Button or ButtonIcon: The menu trigger. Choose variant and tone to suit the UI
MenuItemLink: One item per destination, with a logo icon. Order alphabetically and put “Copy link” last

Interaction

After a selection

Open the share link in a new tab and close the menu.
For “Copy link”, close the menu and show a positive Toast.

Best practices

Mobile and apps

For basic share options, it’s recommended to utilise the native OS share sheet.
If you require additional options not included in the native OS share sheet, you may want to create a custom sheet. If you create a custom sheet, consider including an option to open the native sheet from within the custom menu.
Similarly to web, you may choose an appropriate trigger to meet your needs, however the relevant OS share icon may be most appropriate.

When to use

Use social share:

to allow users to share content with social networks or specific people.

Don’t use social share:

to provide a single action such as copy link (use a Button or ButtonIcon instead)
to build a general menu that is not for sharing (use a MenuRenderer instead).

Related

MenuItem — For displaying buttons and links within a menu.
MenuRenderer — For custom menu components.
Button — For a semantic button.
ButtonIcon — For buttons containing only an icon.

On this page