|
|
---layout : 'default'css : 'button'element : 'button'elementType : 'element'
title : 'Button'description : 'Buttons indicate a possible user action.'type : 'UI Element'
themes : ['Default', 'Basic', 'Chubby', 'Flat', '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">
<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> <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>
<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">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</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</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">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">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="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>
|
