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
Status
Supported
Introduced
v0.2.0
Anatomy
The Button contains two required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The Button has options that can be used to provide an appropriate experience for different use cases.
Appearance
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
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:
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
Note
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.
The Button has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
The Icon Button has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
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.
| Feature | Description | Status |
|---|