---
title: "Javascript Forms Buttons Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/buttons"
---

# Buttons - JavaScript Forms demo

Javascript button styling with full-width and justified layout along with icons, borderless/flat and outline rendering. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/buttons)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/buttons)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/buttons.md), [Angular](https://demo.mobiscroll.com/angular/forms/buttons.md), [React](https://demo.mobiscroll.com/react/forms/buttons.md), [Vue](https://demo.mobiscroll.com/vue/forms/buttons.md)

## Description

Use the buttons on any mobile and desktop form or page. The buttons come with several rendering modes and styles. Use it as:

- fluid-width buttons (the buttons grow with their content)
- justified
- full width buttons

Icon support is built in along with three different styles:

- filled buttons
- flat buttons
- outlined buttons

**Customize the look & feel:** [See how to apply color presets →](https://demo.mobiscroll.com/javascript/forms/button-segmented-stepper-colors)

## What this demo shows

- Demonstrates button styles, content options, layouts, and states for mobile and desktop forms or pages.
- **Width and layout** Fluid-width buttons grow with their content, while justified and full-width layouts distribute buttons across the available space.
- **Button content** Buttons can display text, an icon, or a combination of an icon and text.
- **Styles** Filled, flat, and outlined variants provide different visual treatments.
- **Icons** Data icons can be added to buttons.
- **States** Enabled and disabled states are shown across the different button styles.

## Best for

- **Form actions** Presenting primary and secondary actions with distinct filled, flat, or outlined styles.
- **Responsive layouts** Arranging actions as content-width, justified, or full-width buttons on mobile and desktop screens.
- **Compact controls** Using icon-only buttons where space is limited and the action is recognizable from its icon.
- **Descriptive actions** Combining icons and text when an action benefits from both a visual cue and a clear label.
- **Unavailable actions** Keeping actions visible in a disabled state when they cannot currently be used.

## Tutorial

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button>Button</button>
        <button mbsc-button disabled>Disabled</button>
    </div>
    <div class="mbsc-button-group">
        <button mbsc-button id="action-btn">Click for action</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Full width buttons</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button>Full width button</button>
        <button mbsc-button disabled>Disabled full width</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Justified buttons</div>
    <div class="mbsc-button-group-justified">
        <button mbsc-button>Tag</button>
        <button mbsc-button>Favorite</button>
        <button mbsc-button>Flag</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Icons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-icon="tag"></button>
        <button mbsc-button data-icon="heart"></button>
        <button mbsc-button data-icon="flag" disabled></button>
    </div>
    <div class="mbsc-button-group">
        <button mbsc-button data-start-icon="tag">Tag</button>
        <button mbsc-button data-start-icon="heart">Favorite</button>
        <button mbsc-button data-start-icon="flag" disabled>Flag</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Flat buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-variant="flat">Flat</button>
        <button mbsc-button data-variant="flat" data-start-icon="arrow-left5">Flat & data-icon</button>
        <button mbsc-button data-variant="flat" data-icon="arrow-left5"></button>
        <button mbsc-button data-variant="flat" data-icon="key2" disabled></button>
        <button mbsc-button data-variant="flat" disabled>Flat disabled</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Outline buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-variant="outline">Outline</button>
        <button mbsc-button data-variant="outline" data-start-icon="arrow-left5">Outline & data-icon</button>
        <button mbsc-button data-variant="outline" data-icon="arrow-left5"></button>
        <button mbsc-button data-variant="outline" data-icon="key2" disabled></button>
        <button mbsc-button data-variant="outline" disabled>Outline disabled</button>
    </div>
</div>
```

```js
document.getElementById('bottom-toast')
.addEventListener('click', function () {
    mobiscroll.toast({
        message: 'Button was clicked',
    });
});
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

document.getElementById('action-btn').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Button was clicked',
  });
});
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button>Button</button>
        <button mbsc-button disabled>Disabled</button>
    </div>
    <div class="mbsc-button-group">
        <button mbsc-button id="action-btn">Click for action</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Full width buttons</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button>Full width button</button>
        <button mbsc-button disabled>Disabled full width</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Justified buttons</div>
    <div class="mbsc-button-group-justified">
        <button mbsc-button>Tag</button>
        <button mbsc-button>Favorite</button>
        <button mbsc-button>Flag</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Icons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-icon="tag"></button>
        <button mbsc-button data-icon="heart"></button>
        <button mbsc-button data-icon="flag" disabled></button>
    </div>
    <div class="mbsc-button-group">
        <button mbsc-button data-start-icon="tag">Tag</button>
        <button mbsc-button data-start-icon="heart">Favorite</button>
        <button mbsc-button data-start-icon="flag" disabled>Flag</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Flat buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-variant="flat">Flat</button>
        <button mbsc-button data-variant="flat" data-start-icon="arrow-left5">Flat & data-icon</button>
        <button mbsc-button data-variant="flat" data-icon="arrow-left5"></button>
        <button mbsc-button data-variant="flat" data-icon="key2" disabled></button>
        <button mbsc-button data-variant="flat" disabled>Flat disabled</button>
    </div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Outline buttons</div>
    <div class="mbsc-button-group">
        <button mbsc-button data-variant="outline">Outline</button>
        <button mbsc-button data-variant="outline" data-start-icon="arrow-left5">Outline & data-icon</button>
        <button mbsc-button data-variant="outline" data-icon="arrow-left5"></button>
        <button mbsc-button data-variant="outline" data-icon="key2" disabled></button>
        <button mbsc-button data-variant="outline" disabled>Outline disabled</button>
    </div>
</div>
```

## Implementation notes

- Style is set via `variant`: unset/default renders a filled button, `variant="flat"` renders a flat (borderless) button, `variant="outline"` renders an outlined button (`data-variant` in JS/jQuery).
- `icon` renders an icon-only button with no text; `startIcon` renders an icon before the button's text label (`data-icon`/`data-start-icon` in JS/jQuery). Both work with any `variant`.
- `disabled` (boolean prop/attribute; `[disabled]` in Angular) disables a button in any style or icon combination.
- Layout is controlled by the wrapping container class rather than a per-button option: `mbsc-button-group` gives fluid-width buttons that size to their content, `mbsc-button-group-block` stacks full-width buttons, and `mbsc-button-group-justified` distributes buttons evenly across the available width.
- Framework differences: React `<Button variant="flat" icon="..." startIcon="..." disabled>`; Angular `<mbsc-button variant="flat" icon="..." startIcon="..." [disabled]="true">`; Vue `<MbscButton variant="flat" icon="..." startIcon="..." disabled>`; JS/jQuery `<button mbsc-button data-variant="flat" data-icon="..." data-start-icon="..." disabled>`.
- The "Click for action" button's click handler fires a toast notification confirming the click - JS/jQuery via `mobiscroll.toast({ message: '...' })`, Angular via the injected `Notifications` service's `this.notify.toast({...})`; this demonstrates wiring a button's click event to an imperative action rather than a new button option.

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

- Next: [Segmented](https://demo.mobiscroll.com/javascript/forms/segmented.md) - Javascript segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors.