You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
471 lines
14 KiB
471 lines
14 KiB
---
|
|
layout : 'default'
|
|
css : 'button'
|
|
title : 'Button'
|
|
description : 'Buttons indicate a possible user action.'
|
|
type : 'UI Element'
|
|
---
|
|
<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">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 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">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">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>
|
|
</div>
|
|
<div class="another example">
|
|
<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>
|