What are Semantic UI Buttons?

A button indicates a possible user action. Semantic UI provides an easy-to-use syntax that simplifies not only the styling of a button, but also the natural language semantics.

How to use them

The Semantic UI class is simply added to a button element. Various example are given below to indicate how to use it.


  • Standard Button

Standard Semantic UI button

<button class="ui button">Standard Button</button>
  • Emphasis Button

A button with a different level of emphasis

<button class="ui primary button">

Other emphasis classes are secondary, positive, and negative

  • Animated Button

A button with animation, showing hidden contents

<div class="ui animated fade button" tabindex="0">
  <div class="visible content">Sign-up for a Pro account</div>
  <div class="hidden content">$12.99 a month</div>

The property tabindex="0" above makes the button keyboard focusable, since the <button>tag was not used.

  • Labeled Button

A button alongside a label

<div class="ui labeled button" tabindex="0">
  <div class="ui button"><i class="heart icon"></i> Like</div>
  <a class="ui basic label">2,048</a>

the element <i> is used to specify an icon, here it is a heart icon <i class="heart icon"></i> alongside basic label <a class="ui basic label">2,048</a>

  • Icon Button

A Semantic UI button can be just an icon

<button class="ui icon button">
  <i class="camera icon"></i>

The above is just a camera icon


Semantic UI buttons can exist in a group

<div class="ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>


Semantic UI buttons can contain conditionals

<div class="ui buttons">
  <button class="ui positive button">Yes</button>
  <div class="or" data-text="or"></div>
  <button class="ui negative button">No</button>


Semantic UI buttons can exist in different states, active, disabled, loading. Simply add a state name to the class attributeof` element.

<button class="ui loading button">Loading</button>


Semantic UI buttons exist in variety of sizes, mini, tiny, small, medium, large, big, huge, and massive.

<button class="ui massive button">Massive Button</button>

There is a lot more about Semantic UI buttons, visit the provided link in More Information section to learn more.

More Information: