# Inline buttons

Home Search

## Inline buttons

By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:

Button

However, if you want a more compact button that is only as wide as the text and icons inside, add the `data-inline="true"` attribute to the button:

Button

If you have multiple buttons that should sit side-by-side on the same line, add the `data-inline="true"` attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.

    <a href="index.html" data-role="button" data-inline="true">Cancel</a>
    <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

The result is this:

Cancel Save

Adding the `data-mini="true"` to the inline buttons creates a more compact version:

Cancel Save

If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.

## Icon example

When an icon is added to an inline button, the button will grow wider to accommodate the icon:

Cancel Save

A mini version of the same:

Cancel Save

### More in this section

- Buttons
- Button basics
- Button icons
- Inline buttons
- Grouped buttons
- Theming buttons