Standard Button
__Button|Follow__
__<Optional-Class> Button|Follow|<Optional-ID>__
__Focusable Button|Follow|<Optional-ID>__
A button can be formatted to show different levels of emphasis
__Primary Button|Save__ __Button|Discard__
__Secondary Button|Save__ __Button|Discard__
A button can animate to show hidden content
__Animated Button|Next;Icon:Right Arrow__
__Vertical Animated Button|Icon:Shop;Shop__
__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
A button can have only an icon
__Icon Button|Icon:Cloud__
A button can have an icon and a label
__Labeled Icon Button|Icon:Pause,Pause__
A basic button is less pronounced
__Basic Button|Icon:User,Add Friend__
__Basic Standard Button|Standard__
__Basic Black Button|Black__
__Basic Yellow Button|Yellow__
__Basic Green Button|Green__
__Basic Blue Button|Blue__
__Basic Orange Button|Orange__
__Basic Purple Button|Purple__
__Basic Pink Button|Pink__
__Basic Red Button|Red__
__Basic Teal Button|Teal__
A button can be formatted to appear on dark backgrounds
> Inverted Segment:
> __Inverted Standard Button|Standard__
> __Inverted Black Button|Black__
> __Inverted Yellow Button|Yellow__
> __Inverted Green Button|Green__
> __Inverted Blue Button|Blue__
> __Inverted Orange Button|Orange__
> __Inverted Purple Button|Purple__
> __Inverted Pink Button|Pink__
> __Inverted Red Button|Red__
> __Inverted Teal Button|Teal__
Buttons can exist together as a group
> Buttons:
> __Standard Button|One__
> __Standard Button|Two__
> __Standard Button|Three__
Buttons can exist together as a group
> Icon Buttons:
> __Button|Icon:Align Left__
> __Button|Icon:Align Center__
> __Button|Icon:Align Right__
> __Button|Icon:Align Justify__
<!-- A separator is required in between two spaces -->
> Icon Buttons:
> __Button|Icon:Bold__
> __Button|Icon:Underline__
> __Button|Icon:Text Width__
Button groups can contain conditionals
> Buttons:
> __Button|Cancel__
> __Div Tag||Or__
> __Positive Button|Save__
> Buttons:
> __Button|un__
> __Div Tag||Or|Data:Text:ou__
> __Positive Button|deux|<Optional-ID>__
A button can show it is currently the active user selection
__Active Button|Icon:User, Follow__
A button can show it is currently unable to be interacted with
__Disabled Button|Icon:User,Followed__
A button can show a loading indicator
__Loading Button|Loading__
__Basic Loading Button|Loading__
__Primary Loading Button|Loading__
__Secondary Loading Button|Loading__
A button can be formatted to link to a social website
__Facebook Button|Icon:Facebook, Facebook__
__Twitter Button|Icon:Twitter, Twitter__
__Google Plus Button|Icon:Google Plus, Google Plus__
__VK Button|Icon:VK, VK__
__LinkedIn Button|Icon:LinkedIn, LinkedIn__
__Instagram Button|Icon:Instagram, Instagram__
__YouTube Button|Icon:YouTube, YouTube__
A button can have different sizes
__Mini Button|Mini__
__Tiny Button|Tiny__
__Small Button|Small__
__Medium Button|Medium__
__Large Button|Large__
__Big Button|Big__
__Huge Button|Huge__
__Massive Button|Massive__
A button can have different colors
__Red Button|Red__
__Orange Button|Orange__
__Yellow Button|Yellow__
__Olive Button|Olive__
__Green Button|Green__
__Teal Button|Teal__
__Blue Button|Blue__
__Violet Button|Violet__
__Purple Button|Purple__
__Pink Button|Pink__
__Brown Button|Brown__
__Grey Button|Grey__
__Black Button|Black__
A button can reduce its padding to fit into tighter spaces
__Compact Button|Hold__
__Compact Icon Button|Icon:Pause__
__Compact Labeled Icon Button|Icon:Pause, Pause__
A button can hint towards a positive consequence
__Positive Button|Positive Button__
__Negative Button|Negative Button__
A button can hint towards a negative consequence
__Negative Button|Negative Button__
A button can take the width of its container
__Fluid Button|Fluid Button__
A button can be circular
__Circular Icon Button|Icon:Settings__
A button can be attached to the top or bottom of other content
__Top Attached Focusable Button|Top__
> Attached Segment:
> " "
__Bottom Attached Focusable Button|Bottom__
> Two Top Attached Buttons:
> __Button|One__
> __Button|Two__
<!-- -->
> Attached Segment:
> " "
<!-- -->
> Two Bottom Attached Buttons:
> __Button|One__
> __Button|Two__
A button can be attached to the left or right of other content
> __Left Attached Button|Left__
> __Right Attached Button|Right__
Groups can be formatted to appear vertically
> Vertical Buttons:
> __Button|Feed__
> __Button|Messages__
> __Button|Events__
> __Button|Photos__
Groups can be formatted as icons
> Icon Buttons:
> __Button|Icon:Play__
> __Button|Icon:Pause__
> __Button|Icon:Shuffle__
Groups can be formatted as labeled icons
> Vertical Labeled Icon Buttons:
> __Button|Icon:Play, Play__
> __Button|Icon:Pause, Pause__
> __Button|Icon:Shuffle, Shuffle__
Groups can be formatted to use multiple button types together
> Buttons:
> __Labeled Icon Button|Icon:Left Chevron, Back__
> __Button|Icon:Stop, Stop__
> __Right Labeled Icon Button|Icon:Right Chevron, Forward__
Groups can have their widths divided evenly
> Five Buttons:
> __Button|Overview__
> __Button|Specs__
> __Button|Warranty__
> __Button|Reviews__
> __Button|Support__
<!-- -->
> Three Buttons:
> __Button|Overview__
> __Button|Specs__
> __Button|Support__
Groups can have a shared color
> Blue Buttons:
> __Button|One__
> __Button|Two__
> __Button|Three__
A button group can be less pronounced
> Basic Buttons:
> __Button|One__
> __Button|Two__
> __Button|Three__
___
> Vertical Basic Buttons:
> __Button|One__
> __Button|Two__
> __Button|Three__
> Buttons:
> __Red Basic Button|One__
> __Blue Basic Button|Two__
> __Green Basic Button|Three__
Groups can have a shared size
> Large Buttons:
> __Button|One__
> __Button|Two__
> __Button|Three__
> Small Basic Icon Buttons:
> __Button|Icon:File__
> __Button|Icon:Save__
> __Button|Icon:Upload__
> __Button|Icon:Download__
> Large Buttons:
> __Button|One__
> __Div Tag||Or__
> __Button|Two__