### State Colors

Metronic comes with a number of state colors that can be applied to the most of elements and components. It reuses Bootstrap's original 6 states:

State | Preview | Class postfix | Usage example
--- | --- | --- | ---
Success |  | `*-success` | `btn-success` `m--font-success`
Warning |  | `*-warning` | `btn-warning` `m--font-warning`
Danger |  | `*-danger` | `btn-danger` `m--font-danger`
Info |  | `*-info` | `btn-info` `m--font-info`
Primary |  | `*-primary` | `btn-primary` `m--font-primary`
Secondary |  | `*-secondary` | `btn-secondary` `m--font-secondary`

And also adds its own `brand` and `metal` states:

State | Preview | Class addon | Usage example
--- | --- | --- | ---
Brand |  | `*-brand` | `btn-success` `m--font-brand`
Accent |  | `*-accent` | `btn-accent` `m--font-accent`
Focus |  | `*-focus` | `btn-focus` `m--font-focus`
Metal |  | `*-metal` | `btn-metal` `m--font-metal`
Light |  | `*-light` | `btn-light` `m--font-light`

### State Examples

Apply state classes to any typography element:
Success state text Warning state text Info state text Danger state text Primary state text Focus state text
Apply state classes to any component:
Primary Success Warning Danger Metal Brand Focus
new pending 203 hot fixed in process completed focus accent
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
25%