Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Actions & Inputs

Button

Buttons let users make choices and take action.

Status

Supported

Introduced

v0.2.0

View codeView StorybookView Design

Anatomy

Button

The button component contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Icon Button

The icon button contains one required element and one optional element.

ItemNameDescriptionComponentOptional

Options

The button has options for different use cases.

Appearance

There are three button styles by default: solid, outlined and minimal.

Note

Use inverse buttons on darker backgrounds.

Intent

The button has four intents: primary, secondary, positive and negative. Each communicates a specific tone to the user.

Size

The button comes in small, medium (default) and large.

Border radius and width

Override the button’s border radius and border width, and apply them to the theme.

Icons (leading & trailing)

Add an icon to a button either before (leading) or after (trailing) the label.

Label

Add a label to a button to give users more context about what the button does.

Icon Button

The icon button has the same options, behaviours and properties as the button, but with a single icon in the centre of the container.

Button as a link

Render buttons as links. The link is styled like a button but behaves like a link.

Appearance

There are three button styles by default: solid, outlined and minimal.

Note

Use inverse buttons on darker backgrounds.

Intent

The button has four intents: primary, secondary, positive and negative. Each communicates a specific tone to the user.

Size

The button comes in small, medium (default) and large.

Border radius and width

Override the button’s border radius and border width, and apply them to the theme.

Icons (leading & trailing)

Add an icon to a button either before (leading) or after (trailing) the label.

Label

Add a label to a button to give users more context about what the button does.

Icon Button

The icon button has the same options, behaviours and properties as the button, but with a single icon in the centre of the container.

Button as a link

Render buttons as links. The link is styled like a button but behaves like a link.

States

The Button has the following states:

Base

The default style before the user interacts with the button.

Hover

The button changes style to let the user know it’s interactive.

Focus

Communicates that a user has highlighted a button (e.g. via keyboard or voice).

Active

The button changes style to let the user know they’ve interacted with it.

Disabled

Communicates that a button exists, but isn’t available in that scenario. When the user hovers over a button in a disabled state, the cursor shows as ‘not allowed.

Disabled buttons maintain layout consistency and communicate that a button may become available if another condition is met.

Loading

Communicates that an action will become available when loading is complete, or that an action is being completed.

The background colour of the button changes and a loading indicator is displayed.

Behaviours

Here’s how the button behaves:

Fixed and full width

Buttons can be either fixed width or full width. Consider how they’ll respond and react to containers around them:

Fixed width - size dependant on content (e.g. label or icon)

Full width - size responsive to container

Note

Use full width buttons on smaller screen sizes, or in components (e.g. cards), where the width is restricted.

Transition

When the user hovers over a button, or a button is active, the backgroundColor and/or borderColor transitions.

Clickable area

Buttons have a minimum clickable area (also known as hit area or touch target area). The size of the clickable area changes according to the size of the button.

Fixed and full width

Buttons can be either fixed width or full width. Consider how they’ll respond and react to containers around them:

Fixed width - size dependant on content (e.g. label or icon)

Full width - size responsive to container

Note

Use full width buttons on smaller screen sizes, or in components (e.g. cards), where the width is restricted.

Transition

When the user hovers over a button, or a button is active, the backgroundColor and/or borderColor transitions.

Clickable area

Buttons have a minimum clickable area (also known as hit area or touch target area). The size of the clickable area changes according to the size of the button.

Usage

Here’s how and when to use the button:

Do allow a sufficient hit area

When placing two or more buttons inline, make sure they are a sufficient size or have spacing between them to avoid users accidentally hitting the wrong button.

Don’t use full width buttons in wide containers

Full width buttons are more appropriate for small devices or contained components.

Do consider button width

When deciding between a fixed or full width button, consider how it will respond and react to the containers around it.

Don’t separate related buttons

Place related buttons next to each other so associated actions are relative, and to reduce cognitive load.

Don’t stack buttons unnecessarily

Avoid stacking buttons when there’s enough space to place them side by side.

Don’t have more than one primary button

Avoid having more than one primary (high emphasis) button on a screen to help guide the user to the primary action.

Accessibility considerations

The button has the following accessibility considerations:

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser supplied
The button supports native HTML and aria attributes.

SEO

Ensure icons have alt text applied.

API

Button

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

NameTypeDefaultDescriptionRequired
Icon Button

The icon button has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?