---
layout      : 'default'
css         : 'button'
element     : 'button'
elementType : 'element'

title       : 'Button'
description : 'Buttons indicate a possible user action.'
type        : 'UI Element'

themes      : ['default', 'basic', 'github']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/elements/button.less" />
<script src="/javascript/button.js"></script>

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Groups</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
  <h2 class="ui dividing header">Types</h2>

  <div class="follow example">
    <h4 class="ui header">Button</h4>
    <p>A standard button</p>
    <div class="ui button">
      Follow
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Ordinality</h4>
    <p>A button can be formatted to show different levels of emphasis</p>
    <div class="ui primary button">
      Add to Cart
    </div>
    <div class="ui secondary button">
      Save
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Animated</h4>
    <p>A button can animate to show hidden content</p>
    <div class="ui ignored message">The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show</div>
    <div class="ui animated button">
      <div class="visible content">Next</div>
      <div class="hidden content">
        <i class="right icon"></i>
      </div>
    </div>
    <div class="ui vertical animated button">
      <div class="hidden content">Shop</div>
      <div class="visible content">
        <i class="cart icon"></i>
      </div>
    </div>
    <div class="ui animated fade button">
      <div class="visible content">Sign-up for a Pro account</div>
      <div class="hidden content">
        $12.99 a month
      </div>
    </div>

  </div>


  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A button can have only an icon</p>
    <div class="ui icon button">
      <i class="cloud icon"></i>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Labeled Icon</h4>
    <p>A button can have an icon and a label</p>
    <div class="ui labeled icon button">
      <i class="pause icon"></i>
      Pause
    </div>
    <div class="ui right labeled icon button">
      <i class="right arrow icon"></i>
      Next
    </div>
  </div>
  <h2 class="ui dividing header">Groups</h2>

  <div class="example">
    <h4 class="ui header">Buttons</h4>
    <p>Buttons can exist together as a group</p>
    <div class="ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Icons</h4>
    <p>Button groups can show groups of icons</p>
    <div class="ui icon buttons">
      <div class="ui button"><i class="align left icon"></i></div>
      <div class="ui button"><i class="align center icon"></i></div>
      <div class="ui button"><i class="align right icon"></i></div>
      <div class="ui button"><i class="align justify icon"></i></div>
    </div>
    <div class="ui icon buttons">
      <div class="ui button"><i class="bold icon"></i></div>
      <div class="ui button"><i class="underline icon"></i></div>
      <div class="ui button"><i class="text width icon"></i></div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Conditionals</h4>
    <p>Button groups can be separated by conditionals</p>
    <div class="ui buttons">
      <div class="ui button">Cancel</div>
      <div class="or"></div>
      <div class="ui positive button">Save</div>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Hover</h4>
    <p>A button can change to show a user has hovered their mouse</p>
    <div class="ui button">
      Follow
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Down</h4>
    <p>A button can change when pressed using touch or mouse events</p>
    <div class="ui button">
      <i class="user icon"></i>
      Follow
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>A button can show it is currently the active user selection</p>
    <div class="ui active button">
      <i class="user icon"></i>
      Follow
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A button can show it is currently unable to be interacted with</p>
    <div class="ui disabled button">
      <i class="user icon"></i>
      Followed
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Loading</h4>
    <p>A button can show a loading indicator</p>
    <div class="ui loading button">Loading Button</div>
  </div>

  <h2 class="ui dividing header">Variations</h2>


  <div class="example">
    <h4 class="ui header">Social</h4>
    <p>A button can be formatted to link to a social website</p>
    <div class="ui facebook button">
      <i class="facebook icon"></i>
      Facebook
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
      Twitter
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
      Google Plus
    </div>
    <div class="ui vk button">
      <i class="vk icon"></i>
      VK
    </div>
    <br><br>
    <div class="ui linkedin button">
      <i class="linkedin icon"></i>
      LinkedIn
    </div>
    <div class="ui instagram button">
      <i class="instagram icon"></i>
      Instagram
    </div>
    <div class="ui youtube button">
      <i class="youtube icon"></i>
      YouTube
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>A button can have different sizes:</p>
    <div class="mini ui button">
      Mini
    </div>
    <div class="tiny ui button">
      Tiny
    </div>
    <div class="small ui button">
      Small
    </div>
    <div class="medium ui button">
      Medium
    </div>
    <div class="large ui button">
      Large
    </div>
    <div class="big ui button">
      Big
    </div>
    <div class="huge ui button">
      Huge
    </div>
    <div class="massive ui button">
      Massive
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Basic</h4>
    <p>A basic button removes all unnecessary formatting</p>
    <div class="ui basic button">
      <i class="icon user"></i>
      Add Friend
    </div>
  </div>
  <div class="another example">
    <div class="ui inverted segment">
      <div class="ui inverted basic button">
        <i class="icon globe"></i>
        Change Language
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Colors</h4>
    <p>A button can have different colors:</p>
    <a class="ui black button">Black Button</a>
    <a class="ui yellow button">Yellow Button</a>
    <a class="ui green button">Green Button</a>
    <a class="ui blue button">Blue Button</a>
    <a class="ui orange button">Orange Button</a>
    <a class="ui purple button">Purple Button</a>
    <a class="ui red button">Red Button</a>
    <a class="ui teal button">Teal Button</a>
  </div>

  <div class="example">
    <h4 class="ui header">Compact</h4>
    <p>A button can reduce its padding to fit into tighter spaces</p>
    <div class="compact ui button">
      Hold
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Toggle</h4>
    <p>A button can be formatted to toggle on and off</p>
    <div class="ui toggle button">
      Vote
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Feedback</h4>
    <p>A button can be positive or negative:</p>
    <div class="positive ui button">Positive Button</div>
    <div class="negative ui button">Negative Button</div>
  </div>

  <div class="example">
    <h4 class="ui header">Fluid</h4>
    <p>A button can fit parent container:</p>
    <div class="fluid ui button">Fits container</div>
  </div>

  <div class="example">
    <h4 class="ui header">Circular</h4>
    <p>A button can be circular:</p>
    <div class="circular ui icon button">
      <i class="icon settings"></i>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Vertically Attached</h4>
    <p>A button can be attached to the top or bottom of other content</p>
    <div class="ui top attached button">Top</div>
    <div class="ui attached segment"></div>
    <div class="bottom attached ui button">Bottom</div>
  </div>

  <div class="example">
    <h4 class="ui header">Horizontally Attached</h4>
    <p>A button can be attached to the left or right of other content</p>
    <div class="ui left attached button">Left</div>
    <div class="right attached ui button">Right</div>
  </div>


  <h3 class="ui dividing header">Group Variations</h3>

  <div class="example">
    <h4 class="ui header">Vertical</h4>
    <p>Groups can be formatted to appear vertically</p>
    <div class="ui vertical buttons">
      <div class="ui button">Top</div>
      <div class="ui button">Middle</div>
      <div class="ui button">Bottom</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>Groups can be formatted as icons</p>
    <div class="ui icon buttons">
      <div class="ui button">
        <i class="pause icon"></i>
      </div>
      <div class="ui button">
        <i class="play icon"></i>
      </div>
      <div class="ui button">
        <i class="shuffle icon"></i>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Labeled Icon</h4>
    <p>Groups can be formatted as labeled icons</p>
    <div class="ui vertical labeled icon buttons">
      <div class="ui button">
        <i class="pause icon"></i>
        Pause
      </div>
      <div class="ui button">
        <i class="play icon"></i>
        Play
      </div>
      <div class="ui button">
        <i class="shuffle icon"></i>
        Shuffle
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Fluid</h4>
    <p>Groups can be divided evenly to fit parent</p>
    <div class="ui message">Evenly divided elements can either use the number or the word, i.e. 2 or "two"</div>
    <div class="3 fluid ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
    <div class="ui ignored divider"></div>
    <div class="five fluid ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
      <div class="ui button">Four</div>
      <div class="ui button">Five</div>
    </div>
    <div class="ui ignored divider"></div>
    <div class="12 fluid ui icon buttons">
      <div class="ui button"><i class="tag icon"></i></div>
      <div class="ui button"><i class="tags icon"></i></div>
      <div class="ui button"><i class="tasks icon"></i></div>
      <div class="ui button"><i class="terminal icon"></i></div>
      <div class="ui button"><i class="text file icon"></i></div>
      <div class="ui button"><i class="text file outline icon"></i></div>
      <div class="ui button"><i class="time icon"></i></div>
      <div class="ui button"><i class="trash icon"></i></div>
      <div class="ui button"><i class="url icon"></i></div>
      <div class="ui button"><i class="user icon"></i></div>
      <div class="ui button"><i class="users icon"></i></div>
      <div class="ui button"><i class="video icon"></i></div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Colors</h4>
    <p>Groups can have a shared color</p>
    <div class="blue ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Basic</h4>
    <p>A button group can be formatted to remove extra formatting</p>
    <div class="ui basic buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>Groups can have a shared size</p>
    <div class="huge ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
    <div class="large ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
  </div>
  <div class="another example">
    <div class="small icon ui buttons">
      <div class="ui button"><i class="align left icon"></i></div>
      <div class="ui button"><i class="align center icon"></i></div>
      <div class="ui button"><i class="align right icon"></i></div>
      <div class="ui button"><i class="align justify icon"></i></div>
    </div>
    <div class="tiny icon ui buttons">
      <div class="ui button"><i class="align left icon"></i></div>
      <div class="ui button"><i class="align center icon"></i></div>
      <div class="ui button"><i class="align right icon"></i></div>
      <div class="ui button"><i class="align justify icon"></i></div>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge buttons">
      <div class="ui button">One</div>
      <div class="or"></div>
      <div class="ui button">Two</div>
    </div>
    <div class="ui large buttons">
      <div class="ui button">One</div>
      <div class="or"></div>
      <div class="ui button">Two</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small buttons">
      <div class="ui button">One</div>
      <div class="or"></div>
      <div class="ui button">Two</div>
    </div>
    <div class="ui tiny buttons">
      <div class="ui button">One</div>
      <div class="or"></div>
      <div class="ui button">Two</div>
    </div>
  </div>

</div>