Newskit Logo
Newskit Logo
View Github

Actions & Inputs

Button

Buttons allow users to make choices, take actions, and help guide around an interface with a single tap.

Status

Supported

Introduced

v0.2.0

View code

Status

Supported

Introduced

v0.2.0

Anatomy

The Button contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The Button has options that can be used to provide an appropriate experience for different use cases.

Appearance

By default, there are three styles of Button; solid, outlined, and minimal.

Note

Inverse Buttons are intended for use on darker backgrounds.

Intent

The Button has four different intents: primary, secondary, positive, and negative. Each intent is used to communicate a specific semantic tone of the Button to the user.

Size

There are three sizes of Button: small, medium (default), and large.

Border radius and width

The Border Radius and Border Width applied to the Button can be overridden and applied to the theme.

For more information, refer to the Borders foundations.

Icons (leading & trailing)

Icons can be displayed in a Button and can be positioned either before (leading) or after (trailing) the Label in the Button.

Label

Labels can be displayed in a Button. A Label can give more context to what the intended action the Button indicates.

Icon Button

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

Button as a link

Buttons have the ability to render as Links. In this case, the styling of the link looks like a Button but with the behaviour of a link.

Appearance

By default, there are three styles of Button; solid, outlined, and minimal.

Note

Inverse Buttons are intended for use on darker backgrounds.

Intent

The Button has four different intents: primary, secondary, positive, and negative. Each intent is used to communicate a specific semantic tone of the Button to the user.

Size

There are three sizes of Button: small, medium (default), and large.

Border radius and width

The Border Radius and Border Width applied to the Button can be overridden and applied to the theme.

For more information, refer to the Borders foundations.

Icons (leading & trailing)

Icons can be displayed in a Button and can be positioned either before (leading) or after (trailing) the Label in the Button.

Label

Labels can be displayed in a Button. A Label can give more context to what the intended action the Button indicates.

Icon Button

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

Button as a link

Buttons have the ability to render as Links. In this case, the styling of the link looks like a Button but with the behaviour of a link.

States

The Button has the following states:

Base

The Button has a base state. This is the base style of the Button before it has been interacted with by a user.

Hover

The Button has a hover state. The style of the Button changes to visually communicate and provide feedback to the user that the Button is an interactive element.

Focus

The Button in a focus state communicates that a user has highlighted a Button, using an input method such as a keyboard or voice.

Active

The Button has an active state. The style of the Button changes to visually communicate and provide feedback to the user that the Button has been interacted with.

Disabled

The Button in a disabled state communicates that a Button exists, but is not available to the user in that scenario. When the user's cursor hovers over a Button in a disabled state, the cursor shows as not allowed. Disabled Buttons are often used to maintain layout consistency and communicate that a Button may become available if another condition has been met.

Loading

The Button in a loading state 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

The following guidance describes how a Button behaves.

Fixed and full width

Buttons can be displayed in two ways, but consideration should be made to how they will respond and react to containers around them;

Fixed width - size dependant on content (Label, Icons)

Full width - size responsive to the container it is applied to.

Note

Full width Buttons are intended for use on smaller screen sizes or in other components (such as Cards), where the width is restricted.

Transition

When the Button is hovered over, or active, the backgroundColor, and/or borderColor transitions.

Clickable area

The Button has 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 displayed in two ways, but consideration should be made to how they will respond and react to containers around them;

Fixed width - size dependant on content (Label, Icons)

Full width - size responsive to the container it is applied to.

Note

Full width Buttons are intended for use on smaller screen sizes or in other components (such as Cards), where the width is restricted.

Transition

When the Button is hovered over, or active, the backgroundColor, and/or borderColor transitions.

Clickable area

The Button has 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

The following guidance describes how and when to appropriately use the Button component.

Do

When Buttons are to be placed inline, they should maintain at least an 8px gap between the two (or more) Buttons.

Don’t

Avoid using full-width Buttons in wide containers. They are generally appropriate for small devices or contained components.

Do

Buttons can be displayed in two ways (fixed or full width), but consideration should be made to how they will respond and react to containers around them.

Don’t

Avoid placing multiple buttons relating to action too far apart, ensure that they are placed next to each other so that associated actions are relative, and reduce cognitive load.

Don’t

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

Don’t

Avoid stacking Buttons when there is enough space to place side by side.

Accessibility Considerations

The Button has the following accessibility considerations:

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

Note

The Button supports native HTML and aria attributes.

SEO

Ensure icons have Alt Text applied.

API

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

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

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

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?