Newskit Logo
About

Actions & Inputs

Share Bar (deprecated)

The Share Bar component allows users to share hyperlinks of content across their various social media and communication channels. It is usually embedded within article pages in order to increase the reach of a story. The Share Bar component is now deprecated and will be removed in the next major release.

Status

Supported

Introduced

v0.20.1
View code

Status

Supported

Introduced

Interactive Demo

This demo allows you to 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

Share Bars contain two required element(s) and one optional element.

ItemNameDescriptionComponentOptional

Options

Orientation

The Share Bar can be displayed horizontally or vertically.

Label

The label on the Share Bar can be hidden. Hiding the label can reduce visual noise for users, but may give less context to the Share Bar.

Orientation

The Share Bar can be displayed horizontally or vertically.

Label

The label on the Share Bar can be hidden. Hiding the label can reduce visual noise for users, but may give less context to the Share Bar.

Usage

The following guidance describes how and when to appropriately use the Share Bar component.

Don’t

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

Do not add actions that are not relevant to social sharing in the Share Bar items (saving, commenting etc). These should be added as a separate component e.g. a comment button with a share bar (due to the default behaviour on mobile where a single share button is displayed).

Accessibility Considerations

Focus order
OrderElementRole
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

Note

If you have more than one Share Bar on your page - all Share Bar components (or their containers) should have a role set to the region and also a unique aria-label.Keyboard Interactions.

Note

When using an Icon Button in the Share Bar ensure an aria-label e.g. “share to FaceBook” is set on the Icon Button.

SEO Considerations

Ensure icons have Alt Text applied.

API

Below are the properties for the Share Bar component:

Share Bar

Share bar has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?