[heading size="h2" style="uk-module-title"]Buttons[/heading]

To create a button, use the [button] shortcode and customize it using the various parameters available

Parameter	Description	Parameters
Style	Defines the button style or class	default, line, primary, success, danger, link
href	url link of the button	n/a
Target	specifies where to open the linked document	_blank, _self, _parent, _top

[line_break/] [heading size="h3" style="uk-module-title"]Examples[/heading] [button style="default" href="#" target="_self"]Default link[/button] [button_input style="primary" href="#" target="_self"]input button[/button_input] [line_break/] [line_break/] [badge style="note uk-margin-top"]markup[/badge] [code] [button style="default" href="#" target="blank"]button[/button] [button_input style="primary" href="#" target="blank"]button[/button_input] [/code] [line_break/] [heading size="h3" style="uk-module-title"]Button variations[/heading] [button style="default" href="#" target="_self"]Default[/button] [button style="primary" href="#" target="_self"]Primary[/button] [button style="success" href="#" target="_self"]Success[/button] [button style="danger" href="#" target="_self"]Danger[/button] [button style="line" href="#" target="_self"]Line[/button] [button style="link" href="#" target="_self"]link[/button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge] [code] [button style="default" href="#" target="_self"]default[/button] [button style="primary" href="#" target="_self"]primary[/button] [button style="success" href="#" target="_self"]success[/button] [button style="danger" href="#" target="_self"]danger[/button] [button style="line" href="#" target="_self"]line[/button] [button style="link" href="#" target="_self"]link[/button] [/code] [line_break/] [heading size="h3" style="uk-module-title"]Button sizes[/heading]

You can add different size classes to your button to create button size variation using the size classes uk-button-mini, uk-button=small or uk-button-large

[button style="color uk-button-mini" href="#" target="_self"]mini button[/button] [button style="color uk-button-small" href="#" target="_self"]small button[/button] [button style="color" href="#" target="_self" size=""]default button[/button] [button style="color uk-button-large" href="#" target="_self"]Large button[/button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]

[code][button style="color uk-button-mini" href="#" target="_self"]mini button[/button] [button style="color uk-button-small" href="#" target="_self"]small button[/button] [button style="color" href="#" target="_self"]default button[/button] [button style="color uk-button-large" href="#" target="_self"]Large button[/button][/code]

[line_break/] [heading size="h3" style="uk-module-title"]Button group[/heading]

To create a button group, wrap the [button_group] shortcode around the buttons that you'd like to be in the same group.

[button_group] [button style="color" href="#" target="_self"]small[/button] [button style="color" href="#" target="_self"]medium[/button] [button style="color" href="#" target="_self"]large[/button] [/button_group] [line_break/][line_break/] [button_group] [button style="color uk-button-small" href="#" target="_self"]bad[/button] [button style="color uk-button-small" href="#" target="_self"]average[/button] [button style="color uk-button-small" href="#" target="_self"]good[/button] [/button_group] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]

[code][button_group] [button style="color" href="#" target="self"]small[/button] [button style="color" href="#" target="self"]medium[/button] [button style="color" href="#" target="self"]large[/button] [/button_group][/code]

[line_break/] [heading size="h3" style="uk-module-title"]Button with icons[/heading]

To create a button with icon, add the [icon] shortcode besides the text of the button. Click here to see a list of all icons

[line_break/] [button style="color" href="#" target="_self"]complete [icon style="icon-check"/][/button] [button style="success" href="#" target="_self"]events list [icon style="icon-caret-down"/][/button] [button style="default" href="#" target="_self"][icon style="icon-camera"/] gallery[/button] [button style="link" href="#" target="_self"]Download [icon style="icon-cloud-download"/][/button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]

[code][button style="default" href="#" target="_self"]gallery [icon style="icon-camera"/][/button][/code]

[line_break/] [heading size="h3" style="uk-module-title"]Icon buttons[/heading]

You can create icon buttons using the [icon_button] shortcode. These can come in handy especially when creating social icons.

[line_break/] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="dribbble" url="#" target="_self"][/icon_button] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]

[code][icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="dribbble" url="#" target="_self"][/icon_button] [icon_button icon="facebook" url="#" target="_self"][/icon_button][/code]