Button

Buttons make it easy for users to take action on a page, helping them navigate or complete tasks with a single click.

Buttons let users easily take action on a page, staying visible to make interactions seamless. You can also add labels and icons to give users a clear idea of each button's purpose.

When to use this component

Use buttons when you want users to perform actions or navigate between pages. Buttons are especially helpful for simplifying key actions, guiding users to the next step without overwhelming them with too many options at once.

It's generally best to use distinct buttons for each primary action to keep things clear, avoiding multiple buttons for the same task, as this can lead to confusion. If you only need a single button for a minor action, consider using a smaller button style to keep it unobtrusive.

For situations where users need to toggle or select options rather than initiate a task, consider using checkboxes, radio buttons, or toggle switches instead.

Buttons can also work well as alternatives to hyperlinks in cases where you need to emphasise actions and maintain a more structured design.

Examples in GOSS products

Self Service template "View All" buttons
Within the Dialog component
Navigation and actions in forms

Accessibility considerations

The button component combines the best features of accessibility and usability, drawing from WAI-ARIA and GDS guidelines. It offers a range of configuration options to ensure a flexible, user-friendly experience for various needs.

Each button is clearly labelled, making its purpose easy to understand for all users.

When focused, the button displays a clear visual indicator, like a outline or shadow, ensuring that users can easily identify the active button and the action it will trigger.

Basic button

A button component with no additional configuration options, designed to trigger actions in a typical collection of tasks or items.

By default, the button component performs a single specified action, with no extra states or styles.

Each button component can be configured with an action attribute to specify the task it triggers and an identifier attribute to uniquely reference each button in a collection or list.

The button component has a mandatory 'text' property that must be present (even if left blank), which will put plain text within the HTML <button> tags wrapped by inner <span> tags.

HTML Java .NET

<button class="btn">
	<span class="btn__text">Button</span>
</button>

<comp:button text="Button" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Button"
			});
}

Contrast button

A button with a contrast style applied.

btn btn--contrast

By setting the btn--contast class on the button, you can apply this to a button to make it stand out, ensuring users can easily identify it for key actions. This styling aligns with how the info alert components are styled, as the same class is also used in the forms designer for Alert fields and in content areas for Highlight Box inlines. This approach maintains consistency across different components, making interfaces more cohesive and accessible.

HTML Java .NET

<button class="btn btn--contrast">
	<span class="btn__text">Contrast button</span>
</button>

<comp:button text="Contrast button" modifiers="contrast" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Contrast button",
				Modifiers = new string[] { "contrast" }
			});
}

Link button

A button with a link style applied.

btn btn--link

By setting the btn--link class on the button, you can apply this to a button to create a cleaner, more streamlined design, especially when the action is less prominent or needs to blend with surrounding text.

HTML Java .NET

<button class="btn btn--link">
	<span class="btn__text">Link button</span>
</button>

<comp:button text="Link button" modifiers="link" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Link button",
				Modifiers = new string[] { "link" }
			});
}

Disabled button

A button with a disabled attribute applied.

<button class="btn" disabled>...</button>

By setting the disabled attribute on the button, you can apply this to a button to indicate that it's not currently interactive, preventing users from clicking it while still keeping it visible in the interface. This helps maintain clarity and prevents confusion when certain actions aren't available.

HTML Java .NET

<button disabled class="btn btn--disabled">
	<span class="btn__text">Disabled button</span>
</button>

<comp:button text="Disabled button" modifiers="disabled" disabled="true" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Disabled button",
				Modifiers = new string[] { "disabled" }
			});
}

Additional button styles

Buttons with additional modifiers to style it for specific purposes.

Full width button:

btn btn--fullwidth

Pill button:

btn btn--pill

Positive button:

btn btn--postive

Negative button:

btn btn--negative

Progress button:

btn btn--progress

Link error button:

btn btn--link btn--error

HTML Java .NET

<button class="btn btn--fullwidth"><span class="btn__text">Full width button</span></button><br />
<button class="btn btn--pill"><span class="btn__text">Pill button</span></button><br />
<button class="btn btn--positive"><span class="btn__text">Positive button</span></button><br />
<button class="btn btn--negative"><span class="btn__text">Negative button</span></button><br />
<button class="btn btn--progress"><span class="btn__text">Progress button</span></button><br />
<button class="btn btn--link btn--error"><span class="btn__text">Link error button</span></button>

<comp:button text="Full width button" modifiers="fullwidth" /><br />
<comp:button text="Pill button" modifiers="pill" /><br />
<comp:button text="Positive button" modifiers="positive" /><br />
<comp:button text="Negative button" modifiers="negative" /><br />
<comp:button text="Progress button" modifiers="progress" /><br />
<comp:button text="Link error button" modifiers="link,error" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Full width button",
				Modifiers = new string[] { "fullwidth" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Pill button",
				Modifiers = new string[] { "pill" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Positive button",
				Modifiers = new string[] { "positive" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Negative button",
				Modifiers = new string[] { "negative" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Progress button",
				Modifiers = new string[] { "progress" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Link error button",
				Modifiers = new string[] { "link", "error" }
			});

}

Icon button

A button with an icon style applied.

btn btn--forward

By setting the btn--forward class on the button, you can apply this style to a button to make it more visually intuitive. This can enhance clarity and improve the user experience, especially when paired with text labels. Icons also align with the overall design system, maintaining a consistent and accessible interface across components.

HTML Java .NET

<button class="btn btn--forward">
	<span class="btn__text">Icon button</span>
</button>

<comp:button text="Icon button" modifiers="forward" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Icon button",
				Modifiers = new string[] { "forward" }
			});
}

Icon button styles

Buttons with additional icon modifiers to style them for specific purposes.

Big icon button:

btn btn--forward btn--big-icon

Icon only button:

btn btn--forward btn--icon-only

Big icon only button:

btn btn--forward btn--big-icon btn--icon-only

HTML Java .NET

<button class="btn btn--forward btn--big-icon">
	<span class="btn__text">Big icon button</span>
</button><br />
<button class="btn btn--forward btn--icon-only">
	<span class="btn__text accessibility">Icon only button</span>
</button><br />
<button class="btn btn--forward btn--big-icon btn--icon-only">
	<span class="btn__text accessibility">Big icon only button</span>
</button>

<comp:button text="Test button" modifiers="forward,big-icon" />
<comp:button text="Test button" modifiers="forward,icon-only" />
<comp:button text="Test button" modifiers="forward,big-icon,icon-only" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Big icon button",
				Modifiers = new string[] { "forward", "big-icon" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Icon only button",
				Modifiers = new string[] { "forward", "icon-only" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Big icon only button",
				Modifiers = new string[] { "forward", "big-icon", "icon-only" }
			});
}

Icon options

Buttons with additional icon modifiers to style them for specific purposes.

Add button:

btn btn--add

Alert button:

btn btn--alert

Back button:

btn btn--back

Cancel button:

btn btn--cancel

Complete button:

btn btn--complete

Delete button:

btn btn--delete

Hidden button:

btn btn--displaynone

Edit button:

btn btn--edit

Filter button:

btn btn--filter

Forward button:

btn btn--forward

Home button:

btn btn--home

Link style back button:

btn btn--link btn--back

Pause button:

btn btn--pause

Play button:

btn btn--play

Previous button:

btn btn--prev

Remove button:

btn btn--remove

Search button:

btn btn--search

Selected button:

btn btn--selected

Shortlist button:

btn btn--shortlist

Stop button:

btn btn--stop

Time button:

btn btn--time

Update button:

btn btn--update

Hidden button

HTML Java .NET

<button class="btn btn--add">
	<span class="btn__text">Add button</span>
</button><br />
<button class="btn btn--alert">
	<span class="btn__text">Alert button</span>
</button><br />
<button class="btn btn--back">
	<span class="btn__text">Back button</span>
</button><br />
<button class="btn btn--cancel">
	<span class="btn__text">Cancel button</span>
</button><br />
<button class="btn btn--complete">
	<span class="btn__text">Complete button</span>
</button><br />
<button class="btn btn--delete">
	<span class="btn__text">Delete button</span>
</button><br />
<button class="btn btn--displaynone">
	<span class="btn__text">Hidden button</span>
</button> Hidden button<br />
<button class="btn btn--edit">
	<span class="btn__text">Edit button</span>
</button><br />
<button class="btn btn--filter">
	<span class="btn__text">Filter button</span>
</button><br />
<button class="btn btn--forward">
	<span class="btn__text">Forward button</span>
</button><br />
<button class="btn btn--home">
	<span class="btn__text">Home button</span>
</button><br />
<button class="btn btn--link btn--back">
	<span class="btn__text">Link style back button</span>
</button><br />
<button class="btn btn--pause">
	<span class="btn__text">Pause button</span>
</button><br />
<button class="btn btn--play">
	<span class="btn__text">Play button</span>
</button><br />
<button class="btn btn--prev">
	<span class="btn__text">Previous button</span>
</button><br />
<button class="btn btn--remove">
	<span class="btn__text">Remove button</span>
</button><br />
<button class="btn btn--search">
	<span class="btn__text">Search button</span>
</button><br />
<button class="btn btn--selected">
	<span class="btn__text">Selected button</span>
</button><br />
<button class="btn btn--shortlist">
	<span class="btn__text">Shortlist button</span>
</button><br />
<button class="btn btn--stop">
	<span class="btn__text">Stop button</span>
</button><br />
<button class="btn btn--time">
	<span class="btn__text">Time button</span>
</button><br />
<button class="btn btn--update">
	<span class="btn__text">Update button</span>
</button>

<comp:button text="Add button" modifiers="add" /><br />
<comp:button text="Alert button" modifiers="alert" /><br />
<comp:button text="Back button" modifiers="back" /><br />
<comp:button text="Cancel button" modifiers="cancel" /><br />
<comp:button text="Complete button" modifiers="complete" /><br />
<comp:button text="Delete button" modifiers="delete" /><br />
<comp:button text="Hidden button" modifiers="displaynone" /> Hidden button<br />
<comp:button text="Edit button" modifiers="edit" /><br />
<comp:button text="Filter button" modifiers="filter" /><br />
<comp:button text="Forward button" modifiers="forward" /><br />
<comp:button text="Home button" modifiers="home" /><br />
<comp:button text="Link style back button" modifiers="link,back" /><br />
<comp:button text="Play button" modifiers="pause" /><br />
<comp:button text="Pause button" modifiers="play" /><br />
<comp:button text="Previous button" modifiers="prev" /><br />
<comp:button text="Remove button" modifiers="remove" /><br />
<comp:button text="Search button" modifiers="search" /><br />
<comp:button text="Selected button" modifiers="selected" /><br />
<comp:button text="Shortlist button" modifiers="shortlist" /><br />
<comp:button text="Stop button" modifiers="stop" /><br />
<comp:button text="Time button" modifiers="time" /><br />
<comp:button text="Update button" modifiers="update" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Add button",
				Modifiers = new string[] { "add" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Alert button",
				Modifiers = new string[] { "alert" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Back button",
				Modifiers = new string[] { "back" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Cancel button",
				Modifiers = new string[] { "cancel" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Complete button",
				Modifiers = new string[] { "complete" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Delete button",
				Modifiers = new string[] { "delete" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Hidden button",
				Modifiers = new string[] { "displaynone" }
			});
	<p>Hidden Button</p>
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Edit button",
				Modifiers = new string[] { "edit" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Filter button",
				Modifiers = new string[] { "filter" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Forward button",
				Modifiers = new string[] { "forward" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Home button",
				Modifiers = new string[] { "home" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Link style back button",
				Modifiers = new string[] { "link", "back" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Play button",
				Modifiers = new string[] { "pause" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Pause button",
				Modifiers = new string[] { "play" }
			});
	<br />

	Html.Button(new ButtonSettings
			{
				Text = "Previous button",
				Modifiers = new string[] { "prev" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Remove button",
				Modifiers = new string[] { "remove" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Search button",
				Modifiers = new string[] { "search" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Selected button",
				Modifiers = new string[] { "selected" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Shortlist button",
				Modifiers = new string[] { "shortlist" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Stop button",
				Modifiers = new string[] { "stop" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Time button",
				Modifiers = new string[] { "time" }
			});
	<br />
	Html.Button(new ButtonSettings
			{
				Text = "Update button",
				Modifiers = new string[] { "update" }
			});

}

HTML button type

The HTML type attribute of the button may be configured using the "type" attribute. Valid values for this are "submit", "reset", "button" or "menu".

HTML Java

<button type="submit" class="btn">
	<span class="btn__text">Test submit</span>
</button>
<button type="reset" class="btn">
	<span class="btn__text">Test reset</span>
</button>
<button type="button" class="btn">
	<span class="btn__text">Test button</span>
</button>
<button type="menu" class="btn">
	<span class="btn__text">Test menu</span>
</button>

<comp:button text="Test submit" type="submit" />
<comp:button text="Test reset" type="reset" />
<comp:button text="Test button" type="button" />
<comp:button text="Test menu" type="menu" />

ARIA label

The aria-label attribute may be populated by using the "label" property.

HTML Java .NET

<button class="btn" aria-label="This is the aria label">
	<span class="btn__text">Test button</span>
</button>

<comp:button text="Test button" label="This is the aria label" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Test button",
				Label = "This is the aria label"
			});
}

HTML button name

The HTML name attribute of the button may be configured using the "name" attribute.

HTML Java .NET

<button name="myButton" class="btn">
	<span class="btn__text">Test button</span>
</button>

<comp:button text="Test button" name="myButton" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Test button",
				Name = "myButton"
			});
}

Button onclick attribute

The HTML onclick attribute of the button may be configured using the "onclick" attribute.

HTML Java

<button onclick="return false;" class="btn">
	<span class="btn__text">Test button</span>
</button>

<comp:button text="Test button" onclick="return false;" />

HTML button value

The HTML value attribute of the button may be configured using the "value" attribute.

HTML Java .NET

<button class="btn" value="myValue">
	<span class="btn__text">Test button</span>
</button>

<comp:button text="Test button" value="myValue" />

@{
	Html.Button(new ButtonSettings
			{
				Text = "Test button",
				Value = "myValue"
			});
}

This website uses cookies

When to use this component

Examples in GOSS products

Accessibility considerations

Basic button

Contrast button

Link button

Disabled button

Additional button styles

Icon button

Icon button styles

Icon options

HTML button type

ARIA label

HTML button name

Button onclick attribute

HTML button value

Was this page useful?