Button

Overview

A styled button element with customisable size.

Props

Buttons have a number of props to facilitate a variety of uses. Any prop valid on an Button HTML element as described in here. Custom props are detailed below:

1{
2  small: {
3    typographyPreset: "utilityButton010",
4    stylePreset: "buttonSolidPrimary",
5    spaceInset: "spaceInsetSquish020",
6    minWidth: "sizing090",
7    minHeight: "sizing060",
8    iconSize: "iconSize010",
9    spaceInline: "space020",
10    loadingIndicator: {
11      stylePreset: "indeterminateProgressIndicatorPrimary"
12    }
13  },
14  medium: {
15    typographyPreset: "utilityButton020",
16    stylePreset: "buttonSolidPrimary",
17    spaceInset: "spaceInsetSquish030",
18    minWidth: "sizing100",
19    minHeight: "sizing080",
20    iconSize: "iconSize020",
21    spaceInline: "space020",
22    loadingIndicator: {
23      stylePreset: "indeterminateProgressIndicatorPrimary"
24    }
25  },
26  large: {
27    typographyPreset: "utilityButton030",
28    stylePreset: "buttonSolidPrimary",
29    spaceInset: "spaceInsetSquish040",
30    minWidth: "sizing110",
31    minHeight: "sizing090",
32    iconSize: "iconSize030",
33    spaceInline: "space020",
34    loadingIndicator: {
35      stylePreset: "indeterminateProgressIndicatorPrimary"
36    }
37  }
38}

Playground for Button

1import React from 'react';
2import { Button } from 'newskit';
3
4export default () => (
5  <Button
6    size="medium"
7    overrides={{}}
8    href="https://www.newskit.co.uk/"
9  />
10);
11

Playground for Icon Button

1import React from 'react';
2import { IconButton } from 'newskit';
3
4export default () => (
5  <IconButton
6    size="small"
7    overrides={{ stylePreset: 'iconButtonSolidPrimary' }}
8    href=""
9  />
10);
11

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

Styling

The button & Icon Button components are block level elements with a native HTML button with custom styling.

Accessibility

Each are fully accessible with the native HTML button used.

Colour

Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.

Button as link

Buttons have the ability to render as links when a value for the href prop is passed. This is suitable in cases when you may want the styling of a button but the behaviour of a link.

Any prop valid on an Anchor HTML element is also valid on the Button link component

1
2  <Button href="www.newskit.co.uk" overrides={{stylePreset: 'buttonOutlinedPrimary'}}>
3    Click me!
4  </Button>
5

1
2  <IconButton aria-label="Link icon" href="https://www.newskit.co.uk/">
3    <IconFilledLink />
4  </IconButton>
5  

Variations

Buttons are cues that trigger actions. They are foundation components that allow users to perform actions or navigate an experience in our products.

NewsKit provides 5 types of predefined style preset button variants and corresponding icon buttons, each representing a specific user intention or visual cue that can be performed by the user.

Primary

Intended as the leading trigger or cue of an action. Visually should be the most dominant visual cue used on a page, and as such should be used sparingly to ensure visual balance in the page hierarchy.

Add a button primary style preset token (buttonSolidPrimary, buttonOutlinedPrimary, buttonMinimalPrimary, iconButtonSolidPrimary, iconButtonOutlinedPrimary, iconButtonMinimalPrimary) to the overrides .

Secondary

Indicates actions with lower priority when compared to the primary button. Visually should be more subdued to compliment the primary button.

Add a button secondary style preset token (buttonSolidSecondary, buttonOutlinedSecondary, buttonMinimalSecondary, iconButtonSolidSecondary, iconButtonOutlinedSecondary, iconButtonMinimalSecondary) to the overrides .

Positive

A semantic button that can hint towards a positive consequence.

Add a button positive style preset token (buttonSolidPositive, buttonOutlinedPositive, buttonMinimalPositive, iconButtonSolidPositive, iconButtonOutlinedPositive, iconButtonMinimalPositive) to the overrides .

Negative

A semantic button that can hint towards a negative consequence.

Add a button negative style preset token (buttonSolidNegative, buttonOutlinedNegative, buttonMinimalNegative, iconButtonSolidNegative, iconButtonOutlinedNegative, iconButtonMinimalNegative) to the overrides .

Inverse

Add a button inverse style preset token (buttonSolidInverse, buttonOutlinedInverse, buttonSolidInverse, iconButtonSolidInverse, iconButtonOutlinedInverse, iconButtonMinimalInverse) to the overrides .