Buttons trigger an action such as submitting a form or showing/hiding an interface component.
Component
Button
139 examples
Button
98.css
- CSS
- Code examples
- Open source
Button
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
- Unmaintained
- Open source
Button
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
FloatButton
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Button
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Button
Auro
Alaska Airlines
- Web Components
- Sass
- Code examples
- Usage guidelines
- Open source
Button
Aurora
Government of Canada
- CSS
- Code examples
- Tone of voice
- Open source
- Unmaintained
Button
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Floating action button
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Card button
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Button
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Button Timed
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Button
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Button
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
Button
Brighton & Hove City Council Website pattern library
- Unmaintained
Button
Bulma
- Sass
- Code examples
- Accessibility issues
- Open source
Button
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Button
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
CopyButton
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
IconButton
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
TagButton
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Button
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Button
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
CloseButton
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Icon Button
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Button
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Button
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
ButtonIcon
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Button
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Button
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Button
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Button
Duet Design System
LocalTapiola
- Angular
- Vue
- React
- Code examples
Button
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Button
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Button
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Button
Evergreen
Segment
- React
- Open source
Button
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
Button
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Copy button
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Icon button
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Button
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
Button
Geist Design System
Vercel
- React
- Code examples
Button
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
IconButton
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
HelpButton
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
IconButtonFloating
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Button
giffgaff design system
- Usage guidelines
- Code examples
Button
GOLD Design System
Design System AU
- React
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Button
GOV.UK Design System
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Open source
Button
Grommet
- React
- Code examples
- Open source
Button
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Button
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Button
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Button
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
CloseButton
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
CondensedButton
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
IconButton
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
ToggleButton
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Button
JĆøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
IconButton
JĆøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Button
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button
Luna
Sainsburyās
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Button
Mailchimp design system
- Code examples
Button
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Activity Button
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Button
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Call Control Button
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Button
Morningstar Design System
- Vue
- Usage guidelines
Button
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Download button
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Button
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Button
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
- Open source
Button
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Buttons
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Button
No Style Design System
- Sass
- jQuery
- Open source
- Unmaintained
Button
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Button
ONS Design System
Office for National Statistics
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Button
Ontario Design System
Ontario Government
- HTML
- Sass
- Code examples
- Usage guidelines
- Accessibility
Button
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Button link
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Button
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Button
Paste
Twilio
- React
- CSS-in-JS
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
Button
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Button
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Button
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Button
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Button Pure
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Button Tile
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Button
Primer
GitHub
- React
- Code examples
- Open source
Icon button
Primer
GitHub
- React
- Code examples
- Open source
Button
Purple3
Heroku
- CSS
- Code examples
- Unmaintained
Button
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Floating action button
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Button
Reakit
- React
- Code examples
- Open source
- Accessibility
Button
Ruter Components
- React
- Code examples
- Unmaintained
Button
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Button
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Button
Seek style guide
- React
- Code examples
- Unmaintained
Button
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Toggle
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Button
Shoelace
- Web Components
- Code examples
- Open source
Icon button
Shoelace
- Web Components
- Code examples
- Open source
Button
Source
The Guardian
- React
- Code examples
- Usage guidelines
- Open source
Button
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Action button
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Button
United States Web Design System
United States government
- Nunjucks
- Code examples
- Usage guidelines
- Open source
Button
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Button
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Button
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
Button
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Icon button
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Split button
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Button
West Midlands Network Design System
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Open source
Action button
Wise Design
- Mobile
- Usage guidelines
- Tone of voice
Button
Wise Design
- Mobile
- Usage guidelines
- Tone of voice
Circular button
Wise Design
- Mobile
- Usage guidelines
- Tone of voice
Button
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
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; it 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 link with no href is not focusable -->
<a class="button">I'm a button, click me</a>
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 and 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 the following:
- 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.