Buttons

With tweeki it is very easy to create any button you would like to have. By using smart defaults the markup can be very reduced.

Standard Buttons

Markup	Result
<button>Simple Button</button>	<button>Simple Button</button>
<button size="large">Large Button</button> <button size="small">Small Button</button> <button size="mini">Mini Button</button>	<button size="large">Large Button</button> <button size="small">Small Button</button> <button size="mini">Mini Button</button>
<button> Grouped Buttons </button>	<button> Grouped Buttons </button>
<button> Button Tool Bar </button>	<button> Button Tool Bar </button>
<button class="btn-primary"> Classy Buttons </button>	<button class="btn-primary"> Classy Buttons </button>
<button> Classy||btn-primary Non-classy Very Classy||btn-success </button>	<button> Classy||btn-primary Non-classy Very Classy||btn-success </button>
<button> Standard Button Internal Target|Some Page Title External Target|http://some.where </button>	<button> Standard Button Internal Target|Some Page Title External Target|http://some.where </button>

Dropdown Buttons

<button>
Dropdown-Menu
* Some Menu Item
** Submenu
*
* Some Other Menu Item
</button>

<button> Dropdown-Menu Some Menu Item Submenu Some Other Menu Item </button>
<button> Split Dropdown|Target * Some Menu Item </button>	<button> Split Dropdown|Target Some Menu Item </button>
<button class=""> Non-Button Dropdown * Some Menu Item </button>	<button class=""> Non-Button Dropdown Some Menu Item </button>
<button> Semantic Dropdown * {{#ask:[[Category:Components]]}} </button>	<button> Semantic Dropdown Accordions, Buttons, Carousel, Forms, Modals, Navigation, Tabs, Tooltips </button>

Dropdown Buttons

<button wrapperclass="btn-group dropup">
Dropup
* Some Menu Item
</button>

<button wrapperclass="btn-group dropup"> Dropup Some Menu Item </button>
<button wrapperclass="btn-group btn-group-vertical"> Explicit Wrapper Setting </button>	<button wrapperclass="btn-group btn-group-vertical"> Explicit Wrapper Setting </button>
<button wrapper=""> Explicit Wrapper Unsetting </button>	<button wrapper=""> Explicit Wrapper Unsetting </button>