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
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
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.
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.
