Ionic - Button

---o0o---

Original link

1. Button

a) Style for headers

• button class: add default style for button
• display: inline-block are default
• Style for button likes header, choose one of those below class:
  • button-light
  • button-stable
  • button-positive
  • button-calm
  • button-balanced
  • button-energized
  • button-assertive
  • button-royal
  • button-dark

b) Block button

• add button-block class to applies display: block for this button
• A block button will however go 100% of its parent's width

c) Full Width Block Buttons

• add button-full class to applies display: block and removes borders on the left and right, and any border-radius which may be applied for this button
• A block button will however go 100% of its parent's width

d) Other styles

• button-small: for smaller button
• button-large: for larger button
• button-outline: apply an outline button style, which also has a transparent background.
• button-clear: remove the background button color and border

e) Icon Buttons

Add icon for button by add below classes, use icon-right or icon-left to set posion of icon if button has text
• ion-loading-c
• ion-home
• ion-star: for favorites list
• ion-chevron-right: likes > symbol
• ion-chevron-left: likes < symbol, use for back button
• ion-gear-a: use for setting button
• ion-settings
• ion-navicon

f) Button Bar

You can group together button by button-bar class and add style for each button by
• add color class like 'button-light'
• add icon
• ...

			
<div class="button-bar">
	<a class="button">First</a>
	<a class="button">Second</a>
	<a class="button">Third</a>
</div>