Menu
Button
UI Docs
Globals
Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Card Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Modal Popup Progress Search Shape Sidebar Sticky Tab Transition

Button

Types

Although any tag can be used for a button, it will only be keyboard focusable if you use a <button> tag or you add the property tabindex="0". Keyboard accessible buttons will preserve focus styles after click, which may be visually jarring.

Focusable

Emphasis

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 your color theming for UI elements

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

Labeled

A button can appear alongside a label

Like
2,048
2,048
Like
1,048
Like
1,048
Forks
1,048

Icon

A button can have only an icon

Labeled Icon

A button can use an icon as a label

Basic

A basic button is less pronounced

Inverted

A button can be formatted to appear on dark backgrounds

Groups

Buttons

Buttons can exist together as a group

Icon Buttons

Button groups can show groups of icons

Content

Conditionals

Button groups can contain conditionals

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

States

Active

A button can show it is currently the active user selection

Disabled

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

Loading

A button can show a loading indicator

Variations

Social

A button can be formatted to link to a social website

Size

A button can have different sizes

Floated

A button can be aligned to the left or right of its container

Colored

A button can have different colors

Compact

A button can reduce its padding to fit into tighter spaces

Toggle

A button can be formatted to toggle on and off

Positive

A button can hint towards a positive consequence

Negative

A button can hint towards a negative consequence

Fluid

A button can take the width of its container

Circular

A button can be circular

Vertically Attached

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

Top
Bottom
One
Two
One
Two

Horizontally Attached

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

Group Variations

Vertical Buttons

Groups can be formatted to appear vertically

Icon Buttons

Groups can be formatted as icons

Labeled Icon Buttons

Groups can be formatted as labeled icons

Mixed Group

Groups can be formatted to use multiple button types together

Equal Width

Groups can have their widths divided evenly

Colored Buttons

Groups can have a shared color

Basic Buttons

A button group can be less pronounced

One
Two
Three

Group Sizes

Groups can have a shared size

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
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