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

# Buttons - React Forms demo

React button styling with full-width and justified layout along with icons, borderless/flat and outline rendering. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/forms/buttons)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/buttons)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/form-components/forms/buttons)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/buttons.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/buttons.md), [Angular](https://demo.mobiscroll.com/angular/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/react/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

```jsx
const actionToast = () => {
    toast({
        message: 'Button was clicked',
    });
}

<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Buttons</div>
    <div className="mbsc-button-group">
        <Button>Button</Button>
        <Button disabled>Disabled</Button>
    </div>
    <div className="mbsc-button-group">
        <Button onClick={actionToast}>Click for action</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Full width buttons</div>
    <div className="mbsc-button-group-block">
        <Button>Full width button</Button>
        <Button disabled>Disabled full width</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Justified buttons</div>
    <div className="mbsc-button-group-justified">
        <Button>Tag</Button>
        <Button>Favorite</Button>
        <Button>Flag</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Icons</div>
    <div className="mbsc-button-group">
        <Button icon="tag"></Button>
        <Button icon="heart"></Button>
        <Button icon="flag" disabled></Button>
    </div>
    <div className="mbsc-button-group">
        <Button startIcon="tag">Tag</Button>
        <Button startIcon="heart">Favorite</Button>
        <Button startIcon="flag" disabled>Flag</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Flat buttons</div>
    <div className="mbsc-button-group">
        <Button variant="flat">Flat</Button>
        <Button variant="flat" startIcon="arrow-left5">Flat & Icon</Button>
        <Button variant="flat" icon="arrow-left5"></Button>
        <Button variant="flat" icon="key2" disabled></Button>
        <Button variant="flat" disabled>Flat disabled</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Outline buttons</div>
    <div className="mbsc-button-group">
        <Button variant="outline">Outline</Button>
        <Button variant="outline" startIcon="arrow-left5">Outline & Icon</Button>
        <Button variant="outline" icon="arrow-left5"></Button>
        <Button variant="outline" icon="key2" disabled></Button>
        <Button variant="outline" disabled>Outline disabled</Button>
    </div>
</div>
```

## Code

### JSX

```jsx
import { Button, Page, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useState } from 'react';

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

function App() {
  const [isToastOpen, setToastOpen] = useState(false);

  const actionToast = useCallback(() => {
    setToastOpen(true);
  }, []);

  const handleCloseToast = useCallback(() => {
    setToastOpen(false);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Buttons</div>
        <div className="mbsc-button-group">
          <Button>Button</Button>
          <Button disabled>Disabled</Button>
        </div>
        <div className="mbsc-button-group">
          <Button onClick={actionToast}>Click for action</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Full width buttons</div>
        <div className="mbsc-button-group-block">
          <Button>Full width button</Button>
          <Button disabled>Disabled full width</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Justified buttons</div>
        <div className="mbsc-button-group-justified">
          <Button>Tag</Button>
          <Button>Favorite</Button>
          <Button>Flag</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Icons</div>
        <div className="mbsc-button-group">
          <Button icon="tag"></Button>
          <Button icon="heart"></Button>
          <Button icon="flag" disabled></Button>
        </div>
        <div className="mbsc-button-group">
          <Button startIcon="tag">Tag</Button>
          <Button startIcon="heart">Favorite</Button>
          <Button startIcon="flag" disabled>
            Flag
          </Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Flat buttons</div>
        <div className="mbsc-button-group">
          <Button variant="flat">Flat</Button>
          <Button variant="flat" startIcon="arrow-left5">
            Flat & Icon
          </Button>
          <Button variant="flat" icon="arrow-left5"></Button>
          <Button variant="flat" icon="key2" disabled></Button>
          <Button variant="flat" disabled>
            Flat disabled
          </Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Outline buttons</div>
        <div className="mbsc-button-group">
          <Button variant="outline">Outline</Button>
          <Button variant="outline" startIcon="arrow-left5">
            Outline & Icon
          </Button>
          <Button variant="outline" icon="arrow-left5"></Button>
          <Button variant="outline" icon="key2" disabled></Button>
          <Button variant="outline" disabled>
            Outline disabled
          </Button>
        </div>
      </div>
      <Toast message="Button was clicked." isOpen={isToastOpen} onClose={handleCloseToast} />
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Page, setOptions, Toast } from '@mobiscroll/react';
import { FC, useCallback, useState } from 'react';

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

const App: FC = () => {
  const [isToastOpen, setToastOpen] = useState(false);

  const handleCloseToast = useCallback(() => {
    setToastOpen(false);
  }, []);

  const actionToast = () => {
    setToastOpen(true);
  };

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Buttons</div>
        <div className="mbsc-button-group">
          <Button>Button</Button>
          <Button disabled>Disabled</Button>
        </div>
        <div className="mbsc-button-group">
          <Button onClick={actionToast}>Click for action</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Full width buttons</div>
        <div className="mbsc-button-group-block">
          <Button>Full width button</Button>
          <Button disabled>Disabled full width</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Justified buttons</div>
        <div className="mbsc-button-group-justified">
          <Button>Tag</Button>
          <Button>Favorite</Button>
          <Button>Flag</Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Icons</div>
        <div className="mbsc-button-group">
          <Button icon="tag"></Button>
          <Button icon="heart"></Button>
          <Button icon="flag" disabled></Button>
        </div>
        <div className="mbsc-button-group">
          <Button startIcon="tag">Tag</Button>
          <Button startIcon="heart">Favorite</Button>
          <Button startIcon="flag" disabled>
            Flag
          </Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Flat buttons</div>
        <div className="mbsc-button-group">
          <Button variant="flat">Flat</Button>
          <Button variant="flat" startIcon="arrow-left5">
            Flat & Icon
          </Button>
          <Button variant="flat" icon="arrow-left5"></Button>
          <Button variant="flat" icon="key2" disabled></Button>
          <Button variant="flat" disabled>
            Flat disabled
          </Button>
        </div>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Outline buttons</div>
        <div className="mbsc-button-group">
          <Button variant="outline">Outline</Button>
          <Button variant="outline" startIcon="arrow-left5">
            Outline & Icon
          </Button>
          <Button variant="outline" icon="arrow-left5"></Button>
          <Button variant="outline" icon="key2" disabled></Button>
          <Button variant="outline" disabled>
            Outline disabled
          </Button>
        </div>
      </div>
      <Toast message="Button was clicked." isOpen={isToastOpen} onClose={handleCloseToast} />
    </Page>
  );
};
export default App;
```

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

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

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

## Related demos

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