Menu
Menu
UI Element: Button
1 of 14
Button Divider Flag Header Icon Image Input Label List Loader Rail Reveal Segment Step

Button

A button indicates a possible user action

Definition Type
Design
Code
Summary
11 Themes
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Button
Download ZIP View GitHub

Package Managers

Types

A button will only be keyboard focusable if you set the property tabindex="0", or if you use a <button>. You can read more about keyboard focus standards at webAIM.
Focusable

Ordinality

A button can be formatted to show different levels of emphasis

Setting your brand colors to primary and secondary color variables in site.variables, will allow you to use consistent color theming for UI elements
Save
Discard
Okay
Cancel

Animated

A button can animate to show hidden content

The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
Next
Sign-up for a Pro account

Icon

A button can have only an icon

Labeled Icon

A button can have an icon and a label

Pause
Next

Basic

A basic button is less pronounced

Add Friend
Black
Yellow
Green
Blue
Orange
Purple
Pink
Red
Teal

Inverted

A button can be formatted to appear on dark backgrounds

Standard
Black
Yellow
Green
Blue
Orange
Purple
Pink
Red
Teal
Basic
Basic Black
Basic Yellow
Basic Green
Basic Blue
Basic Orange
Basic Purple
Basic Pink
Basic Red
Basic Teal

Groups

Buttons

Buttons can exist together as a group

One
Two
Three

Icons

Button groups can show groups of icons

Conditionals

Button groups can be separated by conditionals

Cancel
Save
Or buttons can have their text localized, or adjusted by using the data-text attribute. If the size of the conditional changes you will need to adjust @orCircleSize
un
deux

States

Hover

A button can change to show a user has hovered their mouse

Follow

Down

A button can change when pressed using touch or mouse events

Follow

Active

A button can show it is currently the active user selection

Follow

Disabled

A button can show it is currently unable to be interacted with

Followed

Loading

A button can show a loading indicator

Loading
Loading
Loading
Loading

Variations

Social

A button can be formatted to link to a social website

Google Plus
VK
LinkedIn
Instagram
YouTube

Sizes

A button can have different sizes

Mini
Tiny
Small
Medium
Large
Big
Huge
Massive

Colors

A button can have different colors

Black
Yellow
Green
Blue
Orange
Purple
Red
Pink
Teal

Compact

A button can reduce its padding to fit into tighter spaces

Hold
Pause

Toggle

A button can be formatted to toggle on and off

Vote

Feedback

A button can be positive or negative:

Positive Button
Negative Button

Fluid

A button can fit parent container:

Fits container

Circular

A button can be circular:

Vertically Attached

A button can be attached to the top or bottom of other content

Top
Bottom

Horizontally Attached

A button can be attached to the left or right of other content

Left
Right

Group Variations

Vertical Group

Groups can be formatted to appear vertically

Feed
Messages
Events
Photos

Icon Group

Groups can be formatted as icons

Labeled Icon Group

Groups can be formatted as labeled icons

Pause
Play
Shuffle

Mixed Group

Groups can be formatted to use multiple button types together

Back
Stop
Forward

Evenly Divided

Groups can have their widths divided evenly

Evenly divided elements can either use the number or the word, i.e. 2 or "two"
Overview
Specs
Reviews
Overview
Specs
Warranty
Reviews
Support

Colored Group

Groups can have a shared color

One
Two
Three

Basic Group

A button group can be formatted to remove extra formatting

One
Two
Three
One
Two
Three
One
Two
Three

Group Sizes

Groups can have a shared size

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
One
Two
One
Two
One
Two

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header