Button

form

Submit, Link or click -button.

Example

Button
HTML code 
<span class="button"><h4>Button</h4></span>
Type atom
Group form
Elements icon, title, description
More examples Basic:

Button
Input, select:

Round:

Button

Button
Square:

Check

Tarksta tämä

Round

small
Justified:

Check

Tarksta tämä

PHP

Wrapper to use element through PHP

Extends eUiElement
Render html
Create arguments style
Code example

Basic button

$this->get('ui', 'button', Array(
  'icon'    => 'app-check',
  'title'   => 'Button',
  'color'   => 'success'
));

Submit button

Button that submits the form it is in

$this->get('ui', 'button', Array(
  'icon'    => 'app-check',
  'title'   => 'Button',
  'color'   => 'success',
  'submit'  => 'submit_name'
));

Link button

Button that is used as a link

$this->get('ui', 'button', Array(
  'icon'    => 'app-check',
  'title'   => 'Button',
  'color'   => 'success',
  'link'    => 'link/route'
));

Trigger button

Button to trigger Javascript function

$this->get('ui', 'button', Array(
  'icon'    => 'app-check',
  'title'   => 'Button',
  'color'   => 'success',
  'onclick' => 'runMe()'
));

All parameters

$this->get('ui', 'button', Array(
  'id'      => 'my_button_id',
  'role'    => 'primary_button',
  'icon'    => 'app-check',
  'title'   => 'Button',
  'color'   => 'success',
  'size'    => 'large',
  'shape'   => 'round',
  'style'   => 'square',
  'tooltip' => 'This is a button',
  'link'    => 'folder/orders',
  'submit'  => 'name',
  'onclick' => 'runMe()'
));

Javascript

Wrapper to use element through Javascript

Methods
Method name Description
setTitle(txt) Set title text
setIcon(name) Set icon
Code example

Action button

var $Button = cms.get('ui', 'button', {
  icon:    'app-check',
  title:   'Button',
  onclick: function(){}
});

Submit button

var $Button = cms.get('ui', 'button', {
  icon:    'app-check',
  title:   'Button',
  submit:  'submit_name'
});

Link button

var $Button = cms.get('ui', 'button', {
  icon:    'app-check',
  title:   'Button',
  link:    'table/customer/addnew'
});

All parameters

cms.get('ui', 'button', {
  id:      'my_button_id',
  role:    'primary_button',
  icon:    'app-check',
  title:   'Button',
  tooltip: 'Tooltip',
  color:   'green',
  shape:   'round',
  size:    'large',
  width:   100,
  height:  100,
  submit:  'submit_name',
  link:    'table/customer/addnew',
  onclick: 'myFunc()',
  onclick:  function(){}
}).appendTo( selector );

Styles

Elements Css style

jumbo

Jumbo

Jumbo
large

Large

Large
normal

Normal

Normal
small

Small

Small
mini

Mini

Mini
round

Round

Round
radius

Radius

Radius
sharp

Sharp

Sharp
justified

Justified

Justified

Full width.
square

Square

Square

Square -shaped button. Icon on top of title.
circle

Circle

Circle

Circle -shaped button. Icon on top of title.
input

Input

Input

Matches style, when grouped input.
select

Select

Select

Matches style, when grouped with select.
menu

Menu

Menu
placeholder

Placeholder

Placeholder

Placeholderin näköinen, haalea katkoviiva.
outline

Outline

Outline

Only border.
plain

Plain

Plain

No border nor background
disabled

Disabled

Disabled

Button that is not in use.
separator

Separator

Separator

Make space between buttons in same group
table-cell

Table-cell

Table-cell

Fits nicely to table
violet

Violet

Violet
purple

Purple

Purple
indigo

Indigo

Indigo
blue

Blue

Blue
azure

Azure

Azure
cyan

Cyan

Cyan
teal

Teal

Teal
darkgreen

Darkgreen

Darkgreen
green

Green

Green
lime

Lime

Lime
yellow

Yellow

Yellow
amber

Amber

Amber
orange

Orange

Orange
darkorange

Darkorange

Darkorange
red

Red

Red
pink

Pink

Pink
brown

Brown

Brown
white

White

White
lightgray

Lightgray

Lightgray
gray

Gray

Gray
darkgray

Darkgray

Darkgray
black

Black

Black
success

Success

Success
warning

Warning

Warning
danger

Danger

Danger
error

Error

Error
info

Info

Info
muted

Muted

Muted
selected

Selected

Selected
save

Save

Save
delete

Delete

Delete
load

Load

Load
cancel

Cancel

Cancel
confirm

Confirm

Confirm