Semantic UI icon logoUI Docs

Getting Started
Guidelines
OverviewDesign Principles
Styles
OverviewDesign tokensColorTypographyIconography
Components
ButtonContainerCardDividerInputGridList
Support

Button

The building block of the CTA

Types

Button

A standard button

Example

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
Example

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

Example
Example
Example

Animated

Pending JS

Labeled

Labeled

A button can appear alongside a label

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

Icon

A button can have only an icon

Example

Labeled Icon

A button can use an icon as a label

Example

Basic

A basic button is less pronounced

Example
Example
Example

Inverted

A button can be formatted to appear on dark backgrounds

Example

Groups

Example

Buttons

Buttons can exist together as a group

Example

Icon Buttons

Button groups can show groups of icons

Example

Content

Conditionals

Button groups can contain conditionals

Example

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

Example

States

Active

A button can show it is currently the active user selection

Example

Disabled

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

Example

Loading

A button can show a loading indicator

Example

Variations

Social

A button can be formatted to link to a social website

Example

Size

A button can have different sizes

Example

Floated

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

Example

Colored

A button can have different colors

Example

Compact

A button can reduce its padding to fit into tighter spaces

Example

Toggle

A button can be formatted to toggle on and off

Example

Positive

A button can hint towards a positive consequence

Example

Negative

A button can hint towards a negative consequence

Example

Fluid

A button can take the width of its container

Example

Circular

A button can be circular

Example
Example

Vertically Attached

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

Top
Bottom
Example
One
Two
One
Two
Example

Horizontally Attached

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

Example

Group Variations

Vertical Buttons

Groups can be formatted to appear vertically

Example

Icon Buttons

Groups can be formatted as icons

Example

Labeled Icon Buttons

Groups can be formatted as labeled icons

Example

Mixed Group

Groups can be formatted to use multiple button types together

Example

Equal Width

Groups can have their widths divided evenly

Example

Colored Buttons

Groups can have a shared color

Example

Basic Buttons

A button group can be less pronounced

One
Two
Three
Example
Example

Group Sizes

Groups can have a shared size

Example
Example
Example