ionic-framework Ionic CSS components Basic usage of utility colors
Example
Preset Ionic CSS will have a theme and pre-set colors for it. You can modify or override the basic values in the ionic.css or in your custom CSS file. You can also define these with SASS and to use SASS in Ionic you just need to run the ionic setup sass command in your terminal.
Basic usage of colors in a button. The button-<phrase> class will make the button background and borders the color of the set theme.
<button class="button button-positive">
button-positive
</button>
<button class="button button-calm">
button-calm
</button>
<button class="button button-balanced">
button-balanced
</button>
Your CSS prefix choices are the following:
-
<element>-light -
<element>-stable -
<element>-positive -
<element>-calm -
<element>-balanced -
<element>-energized -
<element>-assertive -
<element>-royal -
<element>-dark
These classes can be added also for example in badges etc. Here's an example of a badge:
<span class="badge badge-positive">Positive badge</span>
