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.
532 lines
16 KiB
532 lines
16 KiB
---
|
|
layout : 'default'
|
|
css : 'button'
|
|
element : 'button'
|
|
elementType : 'element'
|
|
|
|
title : 'Button'
|
|
description : 'Buttons indicate a possible user action.'
|
|
type : 'UI Element'
|
|
|
|
themes : ['Default', 'Classic', 'Basic', 'Raised', 'Chubby', 'Round', 'Amazon', 'GitHub']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />
|
|
<script src="/javascript/button.js"></script>
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<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>
|
|
<div class="ui info message">Setting your brand colors to primary and secondary color variables in <code>site.variables</code>, will allow you to use consistent color theming for UI elements</div>
|
|
<p>A button can be formatted to show different levels of emphasis</p>
|
|
<div class="ui primary button">
|
|
<i class="shop icon"></i> Add to Cart
|
|
</div>
|
|
<div class="ui secondary button">
|
|
<i class="save icon"></i> 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 arrow icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical animated button">
|
|
<div class="hidden content">Shop</div>
|
|
<div class="visible content">
|
|
<i class="shop 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>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Basic</h4>
|
|
<p>A basic button is less pronounced</p>
|
|
<div class="ui basic button">
|
|
<i class="icon user"></i>
|
|
Add Friend
|
|
</div>
|
|
</div>
|
|
<div class="another spaced example">
|
|
<div class="ui black basic button">Black</div>
|
|
<div class="ui yellow basic button">Yellow</div>
|
|
<div class="ui green basic button">Green</div>
|
|
<div class="ui blue basic button">Blue</div>
|
|
<div class="ui orange basic button">Orange</div>
|
|
<div class="ui purple basic button">Purple</div>
|
|
<div class="ui pink basic button">Pink</div>
|
|
<div class="ui red basic button">Red</div>
|
|
<div class="ui teal basic button">Teal</div>
|
|
</div>
|
|
|
|
<div class="spaced example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A button can be formatted to appear on dark backgrounds</p>
|
|
<div class="ui inverted segment">
|
|
<div class="ui inverted button">Standard</div>
|
|
<div class="ui inverted black button">Black</div>
|
|
<div class="ui inverted yellow button">Yellow</div>
|
|
<div class="ui inverted green button">Green</div>
|
|
<div class="ui inverted blue button">Blue</div>
|
|
<div class="ui inverted orange button">Orange</div>
|
|
<div class="ui inverted purple button">Purple</div>
|
|
<div class="ui inverted pink button">Pink</div>
|
|
<div class="ui inverted red button">Red</div>
|
|
<div class="ui inverted teal button">Teal</div>
|
|
</div>
|
|
</div>
|
|
<div class="another spaced example">
|
|
<div class="ui inverted segment">
|
|
<div class="ui inverted basic button">Basic</div>
|
|
<div class="ui inverted black basic button">Basic Black</div>
|
|
<div class="ui inverted yellow basic button">Basic Yellow</div>
|
|
<div class="ui inverted green basic button">Basic Green</div>
|
|
<div class="ui inverted blue basic button">Basic Blue</div>
|
|
<div class="ui inverted orange basic button">Basic Orange</div>
|
|
<div class="ui inverted purple basic button">Basic Purple</div>
|
|
<div class="ui inverted pink basic button">Basic Pink</div>
|
|
<div class="ui inverted red basic button">Basic Red</div>
|
|
<div class="ui inverted teal basic button">Basic Teal</div>
|
|
</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="spaced 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>
|
|
<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="spaced 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="spaced example">
|
|
<h4 class="ui header">Colors</h4>
|
|
<p>A button can have different colors</p>
|
|
<div class="ui black button">Black</div>
|
|
<div class="ui yellow button">Yellow</div>
|
|
<div class="ui green button">Green</div>
|
|
<div class="ui blue button">Blue</div>
|
|
<div class="ui orange button">Orange</div>
|
|
<div class="ui purple button">Purple</div>
|
|
<div class="ui red button">Red</div>
|
|
<div class="ui pink button">Pink</div>
|
|
<div class="ui teal button">Teal</div>
|
|
</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 class="ui compact icon button">
|
|
<i class="pause icon"></i>
|
|
</div>
|
|
<div class="ui compact labeled icon button">
|
|
<i class="pause icon"></i>
|
|
Pause
|
|
</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>
|
|
|
|
|
|
<h2 class="ui dividing header">Groups</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Group</h4>
|
|
<p>Groups can be formatted to appear vertically</p>
|
|
<div class="ui vertical buttons">
|
|
<div class="ui button">Feed</div>
|
|
<div class="ui button">Messages</div>
|
|
<div class="ui button">Events</div>
|
|
<div class="ui button">Photos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icon Group</h4>
|
|
<p>Groups can be formatted as icons</p>
|
|
<div class="ui icon buttons">
|
|
<div class="ui button">
|
|
<i class="play icon"></i>
|
|
</div>
|
|
<div class="ui button">
|
|
<i class="pause icon"></i>
|
|
</div>
|
|
<div class="ui button">
|
|
<i class="shuffle icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Labeled Icon Group</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">Evenly Divided</h4>
|
|
<p>Groups can be divided evenly to fit parent</p>
|
|
<div class="ui ignored info 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">Overview</div>
|
|
<div class="ui button">Specs</div>
|
|
<div class="ui button">Reviews</div>
|
|
</div>
|
|
<div class="ui ignored divider"></div>
|
|
<div class="five fluid ui buttons">
|
|
<div class="ui button">Overview</div>
|
|
<div class="ui button">Specs</div>
|
|
<div class="ui button">Warranty</div>
|
|
<div class="ui button">Reviews</div>
|
|
<div class="ui button">Support</div>
|
|
</div>
|
|
<div class="ui ignored divider"></div>
|
|
<div class="9 fluid ui icon buttons">
|
|
<div class="ui button"><i class="backward icon"></i></div>
|
|
<div class="ui button"><i class="fast backward icon"></i></div>
|
|
<div class="ui button"><i class="step backward icon"></i></div>
|
|
<div class="ui button"><i class="play icon"></i></div>
|
|
<div class="ui button"><i class="stop icon"></i></div>
|
|
<div class="ui button"><i class="step forward icon"></i></div>
|
|
<div class="ui button"><i class="fast forward icon"></i></div>
|
|
<div class="ui button"><i class="forward icon"></i></div>
|
|
<div class="ui button"><i class="mute icon"></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Colored Group</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 Group</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">Group 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="ui inverted segment">
|
|
<div class="ui inverted buttons">
|
|
<div class="ui red inverted button">One</div>
|
|
<div class="ui yellow inverted button">Two</div>
|
|
<div class="ui pink inverted button">Three</div>
|
|
</div>
|
|
<div class="ui inverted icon buttons">
|
|
<div class="ui red basic inverted button"><i class="align left icon"></i></div>
|
|
<div class="ui yellow basic inverted button"><i class="align center icon"></i></div>
|
|
<div class="ui pink basic inverted button"><i class="align right icon"></i></div>
|
|
<div class="ui purple basic inverted button"><i class="align justify icon"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="small icon ui buttons">
|
|
<div class="ui button"><i class="file icon"></i></div>
|
|
<div class="ui button"><i class="save icon"></i></div>
|
|
<div class="ui button"><i class="upload icon"></i></div>
|
|
<div class="ui button"><i class="download icon"></i></div>
|
|
</div>
|
|
<div class="tiny icon ui buttons">
|
|
<div class="ui button"><i class="file icon"></i></div>
|
|
<div class="ui button"><i class="save icon"></i></div>
|
|
<div class="ui button"><i class="upload icon"></i></div>
|
|
<div class="ui button"><i class="download 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>
|