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>