Buttons trigger an action such as submitting a form or showing/hiding an interface component.
Component
Button
78 examples
Button
98.css
Button
A11Y Style Guide
- Code examples
- Usage guidelines
- Accessibility
Button
Ant Design
Ant Financial
- Code examples
- Accessibility issues
Button
Atlassian Design System
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Button
Aurora
Government of Canada
- Code examples
- Tone of voice
Button
Australian Government Design System
- Usage guidelines
- Code examples
- Accessibility
Button
Base Web
Uber
- Code examples
- Usage guidelines
Button
Bolt Design System
- Tone of voice
- Code examples
Button
Bootstrap
- Accessibility
- Code examples
Button
Brighton & Hove City Council Website pattern library
Button
Bulma
- Code examples
- Accessibility issues
Button
Carbon Design System
IBM
- Code examples
- Usage guidelines
Button
Cauldron
Deque
- Code examples
- Usage guidelines
- Accessibility
Button
Cedar
Recreational Equipment, Inc.
- Usage guidelines
- Code examples
Button
Chakra UI
- Accessibility
- Code examples
CloseButton
Chakra UI
- Accessibility
- Code examples
Icon Button
Chakra UI
- Accessibility
- Code examples
Button
Clarity Design System
VMware
- Code examples
- Usage guidelines
Button
Duet Design System
LocalTapiola
- Code examples
Button
eBay MIND Patterns
- Accessibility
- Usage guidelines
Action button
Edison Design System
General Electric
- Usage guidelines
- Code examples
Button
Elastic UI framework
Elastic
- Code examples
Button
Evergreen
Segment
Button
FutureLearn design system
FutureLearn
- Usage guidelines
- Tone of voice
Button
Gestalt
Pinterest
- Code examples
IconButton
Gestalt
Pinterest
- Code examples
Button
giffgaff design system
- Usage guidelines
- Code examples
Button
GOV.UK Design System
- Code examples
- Usage guidelines
- Research
Button
Grommet
- Code examples
Button
ICS Design System
IBM Collaboration Solutions
- Usage guidelines
- Accessibility
- Tone of voice
Button
Lightning Design System
Salesforce
- Code examples
- Usage guidelines
- Tone of voice
Button
Luna
Sainsburyās
- Usage guidelines
- Code examples
- Tone of voice
Button
Mailchimp design system
- Code examples
Activity Button
Momentum Design
Cisco
- Code examples
- Usage guidelines
Button
Momentum Design
Cisco
- Code examples
- Usage guidelines
Call Control Button
Momentum Design
Cisco
- Code examples
- Usage guidelines
Button
Mozilla Protocol
- Usage guidelines
Buttons
NHS Digital service manual
- Code examples
- Usage guidelines
- Research
- Tone of voice
Button
Paste
Twilio
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
Button
Polaris
Shopify
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
Button
Primer
GitHub
- Code examples
Marketing button
Primer
GitHub
- Code examples
Button
Purple3
Heroku
- Code examples
Button
Radix
Modulz
- Code examples
Chromeless button
Radix
Modulz
- Code examples
Icon Button
Radix
Modulz
- Code examples
Toggle button
Radix
Modulz
- Code examples
Button
Rizzo
Lonely Planet
Button
Royal Navy design system
- Usage guidelines
- Code examples
Button
Ruter Components
- Code examples
Button
SEB Design Library
Skandinaviska Enskilda Banken
- Code examples
- Usage guidelines
Button
Seeds
Sprout Social
- Code examples
- Usage guidelines
- Tone of voice
Button
Seek style guide
- Code examples
Button
Shoelace
- Code examples
Icon button
Shoelace
- Code examples
Button, CTA-Button
Solar Design System
Bulb
- Code examples
- Usage guidelines
- Research
- Tone of voice
Button
Solid
Buzzfeed
- Code examples
- Usage guidelines
- Accessibility issues
Button
Spark Design System
Quicken Loans
- Usage guidelines
- Code examples
Action Button
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button - CTA
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button - Over Background
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button - Primary
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button - Secondary
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button - Warning
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Clear Button
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Logic Button
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Button
Stacks
Stack Overflow
- Code examples
- Usage guidelines
- Tone of voice
Button
Thumbprint
Thumbtack
- Code examples
Button
United States Web Design System
United States government
- Usage guidelines
- Code examples
Button
uStyle
uSwitch
- Tone of voice
- Code examples
- Usage guidelines
Button
Vercel Design
- Code examples
Button
Vitamin
Decathalon
- Usage guidelines
- Code examples
- Accessibility
Button
Workday Canvas Design System
- Usage guidelines
- Accessibility
- Tone of voice
Icon Button
Workday Canvas Design System
- Usage guidelines
- Accessibility
- Tone of voice
Text Button
Workday Canvas Design System
- Usage guidelines
- Accessibility
- Tone of voice
Description
It's important to make a distinction here: when people talk about buttons on the web, they're probably talking about one of three things:
- A
<button>
element which, depending on its type attribute (submit
,reset
orbutton
), triggers some kind of action: submitting a form, clearing a form, or triggering a JavaScript function. - An
<input>
element with one of the three types:submit
,reset
orbutton
. These are functionally almost identical to a<button>
element with the same type attribute. - Any other interactive HTML element that looks like a button, but isnāt a
<button>
element. This category includes ācall-to-actionā links designed to look like buttons.
In most cases, itās preferable to use a <button>
instead of the corresponding <input>
: With a <button>
the label text goes between opening and closing tags, allowing you to include other HTML elements inside the label; with <input>
youāre restricted to using the value
attribute which only has support for text strings.
If you're interested in the third category, youāre probably either looking for the page on links; or youāre using the wrong element for your buttons (and you should read on to learn why).
Markup
Here is an example button:
<button type="button">I'm a button, click me</button>
The most important thing to note is the type
attribute; this can be one of the following:
submit
: The button submits the form data to the server.reset
: The button resets all the controls to their initial values.button
: The button has no default behaviour and does nothing when pressed; needs a JavaScript event listener attached to it to do anything.
Buttons of type submit
and reset
will do nothing if not placed within a form. If there is no type attribute specified, or the type is invalid, the button is treated as if it had type="submit"
.
As you can probably see, thereās not much markup required here at all, so itās surprising how often mistakes are made. Here is one commonly used (anti)pattern:
<a href="#">I'm a button, click me</a>
By default, this link does nothing but append a '#' to the current URL. If you attach a JavaScript event listener to the element, you can prevent the default behaviour and trigger an action (this example uses jQuery):
$('a').click(function(e) {
e.preventDefault();
/* your_code_here; */
return false;
});
While this technically achieves its purpose (and is the top answer to this stack overflow question viewed 1.3million times) it's still a hack. Users expect certain behaviours from links (e.g. middle click to open in new tab) and others from a button (e.g. 'click' with the space key). When those expectations are not met, this can lead to confusion and frustration.
A far worse thing to do would be to use a non-focusable element such as a <span>
, <div>
or an <a>
with a missing href
attribute. These will not appear in the tab order and are therefore inaccessible to those users who navigate solely using a keyboard.
<!-- Neither of these ābuttonsā are buttons to assistive technologies -->
<div class="button">I'm a button, click me</div>
<span class="button">I'm a button, click me</span>
<!-- A button with no href is not focusable -->
<a class="button">I'm a button, click me</a>
Itās worth noting that although it is possible to make these non-focusable elements accessible, this is only possible by fully replicating the functionality of the native
<button>
element. This involves using attributes such astabindex="0"
(to make the element focusable); ARIA to communicate semantics to assistive technology; and JavaScript event listeners to add keyboard, touch and mouse interactivity. This is a lot of extra work considering the native button element gives you all this behaviour for free.
In Summary:
- Use buttons to perform an action. e.g. āSubmitā, āDeleteā, āCreateā, āHideā
- Give your buttons a
type
attribute - Make buttons look like buttons (and links look like links)123
Styling
As well as using the correct element, it's important to make your buttons look and behave like the correct element. As already mentioned, users have certain expectations around how to interact with an element based on its appearance (known as affordances). Here are some techniques you can use to make buttons more obvious to users:4
- Dynamically size the button to fit the text in it
- Keep the text centre-aligned on a single line
- Ensure the button has distinct styles for disabled, hover, focused, active/pressed and default states.
- Unless it appears inside a button group with other options, use whitespace around the button to distance it from other content.
- Make the button big enough so users of touch devices can comfortably use it (a minimum of 10mm in both dimensions)
If it fits within the design of your website, you could also try:
- Give your buttons rounded corners
- Use subtle box-shadows to raise the button above the rest of the page
- Add a gradient background to give it a 3D appearance
If using multiple buttons that you want to give different prominence, style each one differently: primary actions should be visually more important-looking than secondary actions. Buttons that trigger a potentially negative action such as deleting something can be differentiated with use of the colour red. Consider including a hierarchy of different button styles based on importance.
A note on cursor: pointer
Don't use the CSS property cursor: pointer
to change the default cursor when hovering over a button ā cursor: pointer
is for links. Your buttons should be designed so a user can tell that they are clickable without a different cursor5.
Usage guidelines
Communicate the purpose of a button clearly and concisely using a text label, an icon, or both. Instead of using generic labels like āOKā or āCancelā, think about what action clicking the button will trigger ā if it deletes something, use āDeleteā; if it places an order, use āPlace orderā.
If using only an icon, you will need to ensure the button has a meaningful label6. This label can be included inside the button and hidden visually using a screenreader-only CSS class. Alternatively, the label can be linked to the button using the aria attributes aria-label
or aria-labelledby
. Keep in mind that even if you find the meaning of an icon obvious, your users may not.