---
title: "Vue Forms Colors Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/forms/button-segmented-stepper-colors"
---

# Colors - Vue Forms demo

Vue button, segmented and stepper with color presets for primary, secondary, success, danger and more. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/button-segmented-stepper-colors)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/button-segmented-stepper-colors)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/button-segmented-stepper-colors)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/button-segmented-stepper-colors.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/button-segmented-stepper-colors.md), [Angular](https://demo.mobiscroll.com/angular/forms/button-segmented-stepper-colors.md), [React](https://demo.mobiscroll.com/react/forms/button-segmented-stepper-colors.md)

## Description

Use presets with pre-defined colors on top of the theme colors. Every theme ships with eight customizable presets that can be used across various components including buttons, segmented and steppers:

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark

**Customize the colors or use your own colors:** [Learn how to change the Sass variables for the presets →](https://mobiscroll.com/docs/vue/theming/sass-variables)

## What this demo shows

- This example demonstrates the available preset colors (primary, secondary, success, danger, warning, info, light, and dark).
- **Buttons** Shows each preset color applied to buttons.
- **Segmented controls** Applies the same preset colors to segmented controls with text and icons.
- **Selection** Keeps the selected segment visually distinct in every color variant.
- **Steppers** Demonstrates primary, secondary, success, danger, warning, and info color variants for steppers.
- **Consistent styling** Shows how preset colors provide consistent styling across buttons, segmented controls, and steppers.

## Best for

- **Action hierarchy** Distinguishing primary actions from secondary or lower-priority actions.
- **Outcome-based actions** Using success, danger, or warning colors for confirm, delete, and caution-related buttons.
- **Informational actions** Applying the info preset to actions that open help, details, or supporting information.
- **Contrasting controls** Using light and dark presets where controls need to stand out against different backgrounds.
- **Consistent control states** Carrying the same color meaning across buttons, segmented controls, and steppers.

## Tutorial

```vue
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Button colors</div>
  <div class="mbsc-mbsc-button-group">
    <MbscButton color="primary">Primary</MbscButton>
    <MbscButton color="secondary">Secondary</MbscButton>
    <MbscButton color="success">Success</MbscButton>
    <MbscButton color="danger">Danger</MbscButton>
    <MbscButton color="warning">Warning</MbscButton>
    <MbscButton color="info">Info</MbscButton>
    <MbscButton color="light">Light</MbscButton>
    <MbscButton color="dark">Dark</MbscButton>
  </div>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Segmented colors</div>
  <MbscSegmentedGroup name="groupPrimary" color="primary">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
  <MbscSegmentedGroup name="groupSecondary" color="secondary">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
  <MbscSegmentedGroup name="groupSuccess" color="success">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
  <MbscSegmentedGroup name="groupDanger" color="danger">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
  <MbscSegmentedGroup name="groupWarning" color="warning">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
  <MbscSegmentedGroup name="groupInfo" color="info">
    <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
    <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
    <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
  </MbscSegmentedGroup>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Stepper colors</div>
  <MbscStepper label="Primary" color="primary" v-model="primary" :min="-500" :max="500" :step="100" />
  <MbscStepper label="Secondary" color="secondary" v-model="secondary" :min="-500" :max="500" :step="100" />
  <MbscStepper label="Success" color="success" v-model="success" :min="-500" :max="500" :step="100" />
  <MbscStepper label="Danger" color="danger" v-model="danger" :min="-500" :max="500" :step="100" />
  <MbscStepper label="Warning" color="warning" v-model="warning" :min="-500" :max="500" :step="100" />
  <MbscStepper label="Info" color="info" v-model="info" :min="-500" :max="500" :step="100" />
</div>
```

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscStepper,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const primary = ref(100)
const secondary = ref(100)
const success = ref(100)
const danger = ref(100)
const warning = ref(100)
const info = ref(100)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Button colors</div>
      <div class="mbsc-mbsc-button-group">
        <MbscButton color="primary">Primary</MbscButton>
        <MbscButton color="secondary">Secondary</MbscButton>
        <MbscButton color="success">Success</MbscButton>
        <MbscButton color="danger">Danger</MbscButton>
        <MbscButton color="warning">Warning</MbscButton>
        <MbscButton color="info">Info</MbscButton>
        <MbscButton color="light">Light</MbscButton>
        <MbscButton color="dark">Dark</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Segmented colors</div>
      <MbscSegmentedGroup name="groupPrimary" color="primary">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupSecondary" color="secondary">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupSuccess" color="success">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupDanger" color="danger">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupWarning" color="warning">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupInfo" color="info">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Stepper colors</div>
      <MbscStepper
        label="Primary"
        color="primary"
        v-model="primary"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Secondary"
        color="secondary"
        v-model="secondary"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Success"
        color="success"
        v-model="success"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Danger"
        color="danger"
        v-model="danger"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Warning"
        color="warning"
        v-model="warning"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper label="Info" color="info" v-model="info" :min="-500" :max="500" :step="100" />
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscStepper,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const primary = ref<number>(100)
const secondary = ref<number>(100)
const success = ref<number>(100)
const danger = ref<number>(100)
const warning = ref<number>(100)
const info = ref<number>(100)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Button colors</div>
      <div class="mbsc-mbsc-button-group">
        <MbscButton color="primary">Primary</MbscButton>
        <MbscButton color="secondary">Secondary</MbscButton>
        <MbscButton color="success">Success</MbscButton>
        <MbscButton color="danger">Danger</MbscButton>
        <MbscButton color="warning">Warning</MbscButton>
        <MbscButton color="info">Info</MbscButton>
        <MbscButton color="light">Light</MbscButton>
        <MbscButton color="dark">Dark</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Segmented colors</div>
      <MbscSegmentedGroup name="groupPrimary" color="primary">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupSecondary" color="secondary">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupSuccess" color="success">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupDanger" color="danger">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupWarning" color="warning">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
      <MbscSegmentedGroup name="groupInfo" color="info">
        <MbscSegmented value="desktop" icon="home" :defaultChecked="true">Desktop</MbscSegmented>
        <MbscSegmented value="mobile" icon="mobile">Mobile</MbscSegmented>
        <MbscSegmented value="cloud" icon="cloud-upload">Cloud</MbscSegmented>
      </MbscSegmentedGroup>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Stepper colors</div>
      <MbscStepper
        label="Primary"
        color="primary"
        v-model="primary"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Secondary"
        color="secondary"
        v-model="secondary"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Success"
        color="success"
        v-model="success"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Danger"
        color="danger"
        v-model="danger"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper
        label="Warning"
        color="warning"
        v-model="warning"
        :min="-500"
        :max="500"
        :step="100"
      />
      <MbscStepper label="Info" color="info" v-model="info" :min="-500" :max="500" :step="100" />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- `color` (React/Vue/Angular `color` prop, JS/jQuery `data-color` attribute) accepts all eight presets on `Button`/`mbsc-button`: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`.
- The same `color` option applies to `SegmentedGroup`/`mbsc-segmented-group` and each `Segmented`/`mbsc-segmented` child, and to `Stepper`/`mbsc-stepper` - but only six presets are used there: `primary`, `secondary`, `success`, `danger`, `warning`, `info` (no `light`/`dark` variant for segmented or stepper controls).
- Segmented items share a `name` to group them into one control; each item takes an `icon`/`data-icon` plus `defaultChecked` (React), `[checked]` (Angular), `:defaultChecked` (Vue), or the `checked` attribute (JS/jQuery) to mark the initially selected option.
- `Stepper`/`mbsc-stepper` also takes `min`, `max`, `step`, and `label`/`data-label`; this demo sets `min={-500}`, `max={500}`, `step={100}` with an initial value of `100`.
- Framework differences: React `<Button color="primary">`, `<SegmentedGroup name="..." color="primary"><Segmented value="..." icon="..." defaultChecked={true}>...</Segmented></SegmentedGroup>`, `<Stepper color="primary" defaultValue={100} min={-500} max={500} step={100} />`; Angular `<mbsc-button color="primary">`, `<mbsc-segmented-group color="primary"><mbsc-segmented [checked]="true">...</mbsc-segmented></mbsc-segmented-group>`, `<mbsc-stepper color="primary" [(ngModel)]="value" [min]="-500" [max]="500" [step]="100">`; Vue `<MbscButton color="primary">`, `<MbscSegmentedGroup color="primary"><MbscSegmented :defaultChecked="true">...</MbscSegmented></MbscSegmentedGroup>`, `<MbscStepper color="primary" v-model="value" :min="-500" :max="500" :step="100" />`; JS/jQuery plain markup attributes - `data-color`, `data-icon`, the `checked` attribute, and numeric `min`/`step`/`max`/`value` attributes on `input[mbsc-stepper]`/`input[mbsc-segmented]`.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Stepper](https://demo.mobiscroll.com/vue/forms/stepper.md) - Vue stepper example with fixed/custom steps and editable values.