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

Markup	Result
<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>

Wrappers

Markup	Result
<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>