Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Actions & Inputs

Share Bar

Share bars lets users share content to social media and other channels. They’re typically embedded within article pages. This component is deprecated and will be removed in the next major release.

Status

Deprecated

Introduced

v0.20.1

View codeView StorybookView Design

Interactive demo

This demo lets you preview the share bar component, its variations and configuration options.

Label
Vertical
1import React from 'react';
2import { ShareBar } from 'newskit';
3
4export default () => <ShareBar label="Label" />;
5

Anatomy

The share bar component contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The share bar has options for different use cases:

Orientation

Display the share bar horizontally or vertically.

Label

Hide the label on the share bar. Hiding the label reduces visual noise, but may give less context.

Orientation

Display the share bar horizontally or vertically.

Label

Hide the label on the share bar. Hiding the label reduces visual noise, but may give less context.

Usage

Here’s how and when to use the share bar component:

Don’t use a share bar for more than five items

The maximum number of items in a share bar should be kept to a minimum. It is not recommended to have more than 5 items.

Don’t add actions that are not relevant

Do not add actions that are not relevant to social sharing in a share bar (saving, commenting etc).

Accessibility considerations

Focus order
OrderElementRole
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

If you have more than one share bar on a page, all share bar components (or their containers) should have a role set to the region and a unique aria-label.

When using an icon button in the share bar, set an aria-label (e.g. “share to Facebook”) on the icon button.

SEO considerations

Ensure icons have Alt Text applied.

API

Here are the properties for the share bar component:

Share bar

Share bar has a range of props to define the experience in different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?