Buttons

Button

A standard button

    
<button class="ui button">
    Follow
</button>
    

Emphasis

A button can be formatted to show different levels of emphasis

    
<button class="ui primary button">
    Save
</button>
<button class="ui button">
    Discard
</button>
    
    
<button class="ui secondary button">
    Okay
</button>
<button class="ui button">
    Cancel
</button>
    

Labeled

A button can appear 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>
</div>
<div class="ui left labeled button" tabindex="0">
    <a class="ui basic right pointing label">
        2,048
    </a>
    <div class="ui button">
        <i class="heart icon"></i> Like
    </div>
</div>
<div class="ui left labeled button" tabindex="0">
    <a class="ui basic label">
        1,048
    </a>
    <div class="ui icon button">
        <i class="fork icon"></i>
    </div>
</div>
    
Like
1,048
Forks
1,048
    
<div class="ui labeled button" tabindex="0">
    <div class="ui red button">
        <i class="heart icon"></i> Like
    </div>
    <a class="ui basic red left pointing label">
        1,048
    </a>
</div>
<div class="ui labeled button" tabindex="0">
    <div class="ui basic blue button">
        <i class="fork icon"></i> Forks
    </div>
    <a class="ui basic left pointing blue label">
        1,048
    </a>
</div>