1====== Buttons ====== 2 3===== Examples ===== 4 5| <btn type="default">Default</btn> | Standard button | 6| <btn type="primary">Primary</btn> | Provides extra visual weight and identifies the primary action in a set of buttons | 7| <btn type="success">Success</btn> | Indicates a successful or positive action | 8| <btn type="info">Info</btn> | Contextual button for informational alert messages | 9| <btn type="warning">Warning</btn> | Indicates caution should be taken with this action | 10| <btn type="danger">Danger</btn> | Indicates a dangerous or potentially negative action | 11| <btn type="link">Link</btn> | Deemphasize a button by making it look like a link while maintaining button behavior | 12 13\\ 14 15<code html5> 16<btn type="default">Default</btn> 17<btn type="primary">Primary</btn> 18<btn type="success">Success</btn> 19<btn type="info">Info</btn> 20<btn type="warning">Warning</btn> 21<btn type="danger">Danger</btn> 22<btn type="link">Link</btn> 23</code> 24 25\\ 26 27==== Link button ==== 28 29<code html><btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn></code> 30 31<btn type="success" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn> 32 33\\ 34 35==== Sizes ==== 36 37Fancy larger or smaller buttons? Add ''size="lg"'', ''size="sm"'', or ''size="xs"'' for additional sizes. 38 39<btn type="primary" size="lg">Large button</btn> 40<btn type="default" size="lg">Large button</btn> 41 42<btn type="primary">Default button</btn> 43<btn type="default">Default button</btn> 44 45<btn type="primary" size="sm">Small button</btn> 46<btn type="default" size="sm">Small button</btn> 47 48<btn type="primary" size="xs">Extra small button</btn> 49<btn type="default" size="xs">Extra small button</btn> 50 51\\ 52 53<code html5> 54<btn type="primary" size="lg">Large button</btn> 55<btn type="default" size="lg">Large button</btn> 56 57<btn type="primary">Default button</btn> 58<btn type="default">Default button</btn> 59 60<btn type="primary" size="sm">Small button</btn> 61<btn type="default" size="sm">Small button</btn> 62 63<btn type="primary" size="xs">Extra small button</btn> 64<btn type="default" size="xs">Extra small button</btn> 65</code> 66 67\\ 68 69==== Block ==== 70 71Create block level buttons—those that span the full width of a parent -- by adding ''block="true"'' option. 72 73<btn type="primary" size="lg" block="true">Block level button</btn> 74\\ 75<btn type="default" size="lg" block="true">Block level button</btn> 76 77\\ 78 79<code html5> 80<btn type="primary" size="lg" block="true">Block level button</btn> 81<btn type="default" size="lg" block="true">Block level button</btn> 82</code> 83 84\\ 85 86 87==== Active state ==== 88 89Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Bootstrap Wrapper Plugin detect automatically the active state of current page. 90 91<btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn> 92 93<code html5> 94<btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn> 95</code> 96 97\\ 98 99==== Disabled state ==== 100 101Make buttons look unclickable by fading them back with ''opacity''. 102 103<btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn> 104 105<code html5> 106<btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn> 107</code> 108 109===== Options ===== 110 111<datatable info="false" paging="false" searching="true"> 112^ Attribute ^ Default Value ^ Allowed Values ^ Description ^ 113| ''type'' | ''default'' | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' ''link'' | Type of button | 114| ''icon'' | optional | | Font icon class (eg. Glyphicon or Font-Awesome) | 115| ''size'' | optional | ''lg'' ''sm'' | Button size | 116| ''block'' | optional | ''true'' ''false'' | Block level buttons | 117| ''collapse'' | optional | | Target element selector to collapse (see [[collapse]]) | 118| ''disabled'' | optional | ''true'' ''false'' | Disable the button | 119| ''modal'' | optional | | Modal ID (see [[modal]]) | 120</datatable>