Newskit Logo

Actions & Inputs

Share Bar

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.

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
import React from 'react';
import { ShareBar } from 'newskit';

export default () => <ShareBar label="Label" />;

Anatomy

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

ItemNameDescriptionComponentOptional
1
LabelInforms users what information belongs in a given Share Bar
Text Block
2
Action ItemActions components can be passed into the list which, when clicked, take the user to the relevant social channel.
3
Share Bar ContainerContains the elements of the Share Bar.Block

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.

Do not

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.

Do not

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
1
Action item 1Takes you to first action in the share bar (left if horizontal, top if vertical orientation).
2
Action item 2Takes you to second action in the share bar .
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
container

role

region

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
label

string

If provided with text, adds a label and populates it with the string.
vertical

boolean

false

If true, changes the orientation to vertical. Note that the "spaceInline" will still apply between the vertically orientated label and icons.

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
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?