Buttons are the core of any great mobile app. With Ionic, we support a set of styled buttons in the spirit of Bootstrap.

Styles

<!-- Standard white/grey button -->
<button type="button" class="button button-default">Default</button>

<!-- A secondary dark grey button -->
<button type="button" class="button button-secondary">Secondary</button>

<!-- A dark button -->
<button type="button" class="button button-dark">Dark</button>

<!-- A blue button that can be used in lots of places -->
<button type="button" class="button button-primary">Primary</button>

<!-- A green button -->
<button type="button" class="button button-success">Success</button>

<!-- A cyan button -->
<button type="button" class="button button-info">Info</button>

<!-- An orange button, often used for warning messages -->
<button type="button" class="button button-warning">Warning</button>

<!-- Used for serious actions that have serious side effects -->
<button type="button" class="button button-danger">Danger</button>

Icon-only Buttons

To show a button without padding, a background, or border, add .button-clear. Perfect for icon-only buttons in small spaces.