ionic tutorial - Basic usage of utility colors in ionic framework - ionic framework - ionic 2 - ionic creator - ionic development
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Your CSS prefix choices are the following:
<element>-light
<element>-stable
<element>-positive
<element>-calm
<element>-balanced
<element>-energized
<element>-assertive
<element>-royal
<element>-darkClick below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
These classes can be added also for example in badges etc.
Example
<span class="badge badge-positive">Positive badge</span>