Button

processed with Commons Bulma 0.7.2
Documentation / Button

These macros allow to display buttons in different sizes, colors with behaviors according to the size of the screen


# Colors


Here are the available colors.

<@button color='default' title='default' />
<@button color='primary' title='primary' />
<@button color='secondary' title='secondary' />
<@button color='link' title='link' />
<@button color='info' title='info' />
<@button color='success' title='success' />
<@button color='warning' title='warning' />
<@button color='danger' title='danger' />
    

# Sizes


Here are the available sizes.

<@button size='xs' title='Extra Small' />
<@button size='sm' title='Small' />
<@button title='Default' />
<@button size='md' title='Medium' />
<@button size='lg' title='Large' />
    

# Icons


Here are some examples of icons.

<@button buttonIcon='github' title='Extra Small' />
<@button buttonIcon='twitter' title='Twitter' />
<@button buttonIcon='times' title='Cancel' />
<@button buttonIcon='check' title='Validate' />
<@button buttonIcon='trash' title='Delete' />
<@button buttonIcon='external-link-alt' title='External link' iconPosition='right' />
    

# Just icon with tooltip


Display only the icon with a tooltip when the mouse is over the button. Used for toolbar or actions list.

<@button buttonIcon='github' title='Extra Small' hideTitle=['all'] />
<@button buttonIcon='twitter' title='Twitter' hideTitle=['all'] />
<@button buttonIcon='times' title='Cancel' hideTitle=['all'] />
<@button buttonIcon='check' title='Validate' hideTitle=['all'] />
<@button buttonIcon='trash' title='Delete' hideTitle=['all'] />
    

# Responsive


Display or hide labels according the size of the screen

<@button buttonIcon='github' title='Extra Small' hideTitle=['xs','sm'] />
<@button buttonIcon='twitter' title='Twitter' hideTitle=['xs','sm'] />
<@button buttonIcon='times' title='Cancel' hideTitle=['xs','sm'] />
<@button buttonIcon='check' title='Validate' hideTitle=['xs','sm'] />
<@button buttonIcon='trash' title='Delete' hideTitle=['xs','sm'] />
    

# Parameters documentation


Parameter Value Default
name
id
type button/submit button
size xs/sm/md/lg none
color primary/info/warning/danger/success primary
style string none
title string none
hideTitle sequence none
buttonIcon string none
disabled boolean false
iconPosition string left
dropdownMenu boolean false
cancel boolean false
form string none

Anchor buttons


This macro displays anchor links as buttons.


# Colors


Here are the available colors.

 
<@aButton href='#' title='default' />
<@aButton href='#' color='primary' title='primary' />
<@aButton href='#' color='secondary' title='secondary' />
<@aButton href='#' color='link' title='link' />
<@aButton href='#' color='info' title='info' />
<@aButton href='#' color='success' title='success' />
<@aButton href='#' color='warning' title='warning' />
<@aButton href='#' color='danger' title='danger' />
    

# Sizes


Here are the available sizes.

    
<@aButton href='#' size='xs' title='Extra Small' />
<@aButton href='#' size='sm' title='Small' />
<@aButton href='#' title='Default' />
<@aButton href='#' size='md' title='Medium' />
<@aButton href='#' size='lg' title='Large' />
    

# Icons


Here are some examples of icons.

<@aButton href='#' buttonIcon='github' title='Extra Small' />
<@aButton href='#' buttonIcon='twitter' title='Twitter' />
<@aButton href='#' buttonIcon='times' title='Cancel' />
<@aButton href='#' buttonIcon='check' title='Validate' />
<@aButton href='#' buttonIcon='trash' title='Delete' />
<@aButton href='#' buttonIcon='external-link-alt' title='External link' iconPosition='right' />
    

# Just icon with tooltip


Display only the icon with a tooltip when the mouse is over the button. Used for toolbar or actions list.

<@aButton href='#' buttonIcon='github' title='Extra Small' hideTitle=['all'] />
<@aButton href='#' buttonIcon='twitter' title='Twitter' hideTitle=['all'] />
<@aButton href='#' buttonIcon='times' title='Cancel' hideTitle=['all'] />
<@aButton href='#' buttonIcon='check' title='Validate' hideTitle=['all'] />
<@aButton href='#' buttonIcon='trash' title='Delete' hideTitle=['all'] />
    

# Responsive


Display or hide labels according the size of the screen

<@aButton href='#' buttonIcon='github' title='Extra Small' hideTitle=['xs','sm'] />
<@aButton href='#' buttonIcon='twitter' title='Twitter' hideTitle=['xs','sm'] />
<@aButton href='#' buttonIcon='times' title='Cancel' hideTitle=['xs','sm'] />
<@aButton href='#' buttonIcon='check' title='Validate' hideTitle=['xs','sm'] />
<@aButton href='#' buttonIcon='trash' title='Delete' hideTitle=['xs','sm'] />
    

# Parameters documentation


Parameter Value Default
name
id
href string none
size xs/sm/md/lg none
color primary/info/warning/danger/success primary
class string none
params string none
title string none
hideTitle sequence none
buttonIcon string none
disabled boolean false
iconPosition string left
dropdownMenu boolean false