NewsKit Mobile Logo

Share Bar

Overview

The share bar uses icons to allow users to share.

Usage

A share bar can be used anywhere a user would like to easily share something with social media.

Props

labelstring
If provided with text, adds a label and populates it with the string.
verticalboolean
If provided, changes the orientation of the share bar to vertical. Note that the 'spaceInline' will still apply between the vertically orientated label and icons.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
labelobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the passed label.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the passed label.
spaceInlineMQ<string>
If provided, this overrides the horizontal space between the items and label.
spaceInsetMQ<string>
If provided, this overrides the padding of the share bar.
Refer to the defaults below for the object structure:
{
  label: {
    stylePreset: "shareBarLabel",
    typographyPreset: "utilityLabel020",
    spaceInline: "space040"
  },
  items: {
    spaceInline: "space020"
  }
}

Playground

Label
Props
Vertical
import React from 'react';
import { ShareBar } from 'newskit';

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

For more information on overriding component defaults, see the docs here.

Rationale

Styling

Share bars give the user the ability to share articles.

The articles can be shared via social media or saved locally for later use.

Accessibility

Keyboard navigation

The share bar uses an unordered list to follow accessibility standards.

If a user focuses on an element and presses enter it will do the same action as if the user clicked on it.