Button

processed with Commons Bootstrap 5 + Tabler 1.0

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.