Button

Class Button

Output

Example Buttons

Twig Tag

Tag: UIButton
Syntax

{% UIButton Type {Parameters} %}

Type

Neutral	Make a basis Button component for any purpose
ForPrimaryAction	Make a Button component for a primary action, should be used to tell the user this is the main choice
ForSecondaryAction	Make a Button component for a secondary action, should be used to tell the user this is an second hand choice
ForPositiveAction	Make a Button component for a success action, should be used to tell the user he/she going to make a positive action/choice
ForDestructiveAction	Make a Button component for a destructive action, should be used to tell the user he/she going to make something that cannot be
AlternativeNeutral	Make a basis Button component for any purpose
ForAlternativePrimaryAction	Make a Button component for an alternative primary action, should be used to avoid the user to consider this action as the first
ForAlternativeSecondaryAction	Make a Button component for an alternative secondary action, should be used to avoid the user to focus on this
ForAlternativeValidationAction	Make a Button component for a validation action, should be used to avoid the user to focus on this
ForAlternativeDestructiveAction	Make a Button component for a destructive action, should be used to avoid the user to focus on this
ForCancel	Make a Button component for a cancel, should be used only for UI navigation, not destructive action
IconAction	@param string $sIconClasses
LinkNeutral	Make a link Button component to open an URL instead of triggering a form action
IconLink	@param string $sIconClasses
DestructiveIconLink	@param string $sIconClasses

Button Neutral

syntax

{% UIButton Neutral {sLabel:'value', sName:'value', sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See {@link Button::$sName}
sId	string	optional	NULL

Button ForPrimaryAction

syntax

{% UIButton ForPrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForSecondaryAction

syntax

{% UIButton ForSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForPositiveAction

syntax

{% UIButton ForPositiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForDestructiveAction

syntax

{% UIButton ForDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button AlternativeNeutral

syntax

{% UIButton AlternativeNeutral {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForAlternativePrimaryAction

syntax

{% UIButton ForAlternativePrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForAlternativeSecondaryAction

syntax

{% UIButton ForAlternativeSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForAlternativeValidationAction

syntax

{% UIButton ForAlternativeValidationAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForAlternativeDestructiveAction

syntax

{% UIButton ForAlternativeDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	mandatory
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button ForCancel

syntax

{% UIButton ForCancel {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sLabel	string	optional	NULL
sName	string	optional	NULL	See Button::$sName
sValue	string	optional	NULL	See Button::$sValue
bIsSubmit	bool	optional	false	See Button::$sType
sId	string	optional	NULL

Button IconAction

syntax

{% UIButton IconAction {sIconClasses:'value', sTooltipText:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

parameters

sIconClasses	string	mandatory
sTooltipText	string	optional	‘’
sName	string	optional	NULL
sValue	string	optional	NULL
bIsSubmit	bool	optional	false
sId	string	optional	NULL

Button LinkNeutral

syntax

{% UIButton LinkNeutral {sURL:'value', sLabel:'value', sIconClasses:'value', sTarget:'value', sId:'value'} %}

parameters

sURL	string	mandatory
sLabel	string	optional	‘’
sIconClasses	string	optional	NULL
sTarget	string	optional	NULL
sId	string	optional	NULL

Button IconLink

syntax

{% UIButton IconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sTarget:'value', sId:'value'} %}

parameters

sIconClasses	string	mandatory
sTooltipText	string	mandatory
sURL	string	optional	‘’
sTarget	string	optional	NULL
sId	string	optional	NULL

Button DestructiveIconLink

syntax

{% UIButton DestructiveIconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sName:'value', sTarget:'value', sId:'value'} %}

parameters

sIconClasses	string	mandatory
sTooltipText	string	mandatory
sURL	string	optional	NULL
sName	string	optional	NULL
sTarget	string	optional	NULL
sId	string	optional	NULL

Button common parameters

ActionType	string
AddCSSClass	string	CSS class to add to the generated html block
AddCSSClasses	array	like <code>[‘ibo-is-hidden’, ‘ibo-alert–body’]</code>
AddCssFileRelPath	string
AddHtml	string
AddJsFileRelPath	string
AddMultipleCssFilesRelPaths	array
AddMultipleJsFilesRelPaths	array
CSSClasses	array	like <code>[‘ibo-is-hidden’, ‘ibo-alert–body’]</code>
Color	string
DataAttributes	array	Array of data attributes in the format [‘name’ => ‘value’]
IconClass	string
IsDisabled	bool
IsHidden	bool
JsCode	string
Label	string
OnClickJsCode	string
Tooltip	string

Examples

No examples provided yet