NewsKit Mobile Logo

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, is also valid on the Button component. Custom props are detailed below:

childrenstring
The content of the Button is passed as the child of the component.
sizeButtonSize = ButtonSize.medium
Optional size of the Button: Small, Medium or Large.
eventContextobject
This props allows users to add extra event data to buttons' click events.
eventOriginatorstring = button
This props allows users to add event originator custom name. e.x.: 'play-button'.
overridesobject
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Button accepts:
spaceInsetMQ<string>
If provided, this overrides the padding of the Button. Otherwise, spaceInsetSquish020, spaceInsetSquish030 or spaceInsetSquish040 is used depending on the `size` prop.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Button.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Button. Otherwise, utilityButton010, utilityButton020 or utilityButton030 is used depending on the `size` prop.
spaceInlineMQ<string>
If provided, this overrides the space between multiple children in the underlying Stack. If less than 2 children are passed, this prop is irrelevant.
iconSizestring
If provided, this overrides the icon size of any child icons. Otherwise, iconSize010, iconSize020 or iconSize030 is used depending on the `size` prop. If no icons are present in the Button's children then this prop is irrelevant.

Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.
widthstring
If provided, this sets a fixed width to the Button. This can be a sizing token from the theme, or any CSS length value, e.g. 100% for a full-width element.
heightstring
If provided, this sets a fixed height to the Button. This can be a sizing token from the theme, or any CSS length value.
minHeightstring
If provided, this sets a minimum height to the Button. This can be a sizing token from the theme, or any CSS length value. By default, sizing060, sizing080 or sizing090 is used depending on the `size` prop.
minWidthstring
If provided, this sets a minimum width to the Button. This can be a sizing token from the theme, or any CSS length value. By default, sizing090, sizing100 or sizing110 is used depending on the `size` prop.
Refer to the defaults below for the object structure:
{
  small: {
    typographyPreset: "utilityButton010",
    stylePreset: "buttonDefault",
    spaceInset: "spaceInsetSquish020",
    minWidth: "sizing090",
    minHeight: "sizing060",
    iconSize: "iconSize010",
    spaceInline: "space020"
  },
  medium: {
    typographyPreset: "utilityButton020",
    stylePreset: "buttonDefault",
    spaceInset: "spaceInsetSquish030",
    minWidth: "sizing100",
    minHeight: "sizing080",
    iconSize: "iconSize020",
    spaceInline: "space020"
  },
  large: {
    typographyPreset: "utilityButton030",
    stylePreset: "buttonDefault",
    spaceInset: "spaceInsetSquish040",
    minWidth: "sizing110",
    minHeight: "sizing090",
    iconSize: "iconSize030",
    spaceInline: "space020"
  }
}
disabledboolean = false
If true, the Button will render the disabled state of the styled preset.
isLoadingboolean = false
If true, this will cause the Button to render the loading state of the style preset.

Playground for Button

Props
Size
Style Preset
Typography Preset
Width
Disabled
Loading
import React from 'react';
import { Button } from 'newskit';

export default () => (
  <Button size="medium" overrides={{}} />
);

Playground for Icon Button

Props
Size
Style Preset
Disabled
Loading
import React from 'react';
import { IconButton } from 'newskit';

export default () => (
  <IconButton
    size="small"
    overrides={{ stylePreset: 'iconButtonSolidPrimary' }}
  />
);

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.