> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/7.button.md).

# Button

### Button Props <a href="#button-props" id="button-props"></a>

| Name                         | Type    | Default                                                                         | Description                                                                                                    |
| ---------------------------- | ------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| clear                        | boolean | undefined                                                                       | Makes button in clear style (without fill color). Overwrites `clearIos` and `clearMaterial` props              |
| clearIos                     | boolean | false                                                                           | Makes button in clear style (without fill color) in iOS theme                                                  |
| clearMaterial                | boolean | false                                                                           | Makes button in clear style (without fill color) in Material theme                                             |
| colors                       | object  |                                                                                 | Object with Tailwind CSS colors classes                                                                        |
| colors.activeBgIos           | string  | 'active:bg-primary'                                                             |                                                                                                                |
| colors.activeBgMaterial      | string  | ''                                                                              |                                                                                                                |
| colors.disabledBg            | string  | 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'                       |                                                                                                                |
| colors.disabledBorder        | string  | 'border-black border-opacity-10 dark:border-white dark:border-opacity-10'       |                                                                                                                |
| colors.disabledText          | string  | 'text-black text-opacity-30 dark:text-white dark:text-opacity-30'               |                                                                                                                |
| colors.fillActiveBgIos       | string  | 'active:bg-ios-primary-shade'                                                   |                                                                                                                |
| colors.fillActiveBgMaterial  | string  | ''                                                                              |                                                                                                                |
| colors.fillBgIos             | string  | 'bg-primary'                                                                    |                                                                                                                |
| colors.fillBgMaterial        | string  | 'bg-md-light-primary dark:bg-md-dark-primary'                                   |                                                                                                                |
| colors.fillTextIos           | string  | 'text-white'                                                                    |                                                                                                                |
| colors.fillTextMaterial      | string  | 'text-md-light-on-primary dark:text-md-dark-on-primary'                         |                                                                                                                |
| colors.fillTouchRipple       | string  | 'touch-ripple-white dark:touch-ripple-primary'                                  |                                                                                                                |
| colors.outlineBorderIos      | string  | 'border-primary'                                                                |                                                                                                                |
| colors.outlineBorderMaterial | string  | 'border-md-light-outline dark:border-md-dark-outline'                           |                                                                                                                |
| colors.textIos               | string  | 'text-primary'                                                                  |                                                                                                                |
| colors.textMaterial          | string  | 'text-md-light-primary dark:text-md-dark-primary'                               |                                                                                                                |
| colors.tonalBgIos            | string  | 'bg-primary'                                                                    |                                                                                                                |
| colors.tonalBgMaterial       | string  | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'           |                                                                                                                |
| colors.tonalTextIos          | string  | 'text-primary'                                                                  |                                                                                                                |
| colors.tonalTextMaterial     | string  | 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' |                                                                                                                |
| colors.touchRipple           | string  | 'touch-ripple-primary'                                                          |                                                                                                                |
| component                    | string  | 'button'                                                                        | Component's HTML Element                                                                                       |
| disabled                     | boolean | false                                                                           | Makes button disabled                                                                                          |
| href                         | string  |                                                                                 | Link's `href` attribute, when specified will also be rendered as `<a>` element                                 |
| inline                       | boolean | false                                                                           | Makes button inline (e.g. `display: inline-flex`)                                                              |
| large                        | boolean | undefined                                                                       | Makes button large. Overwrites `largeIos` and `largeMaterial` props                                            |
| largeIos                     | boolean | false                                                                           | Makes button large in iOS theme                                                                                |
| largeMaterial                | boolean | false                                                                           | Makes button large in Material theme                                                                           |
| outline                      | boolean | undefined                                                                       | Makes button outline. Overwrites `outlineIos` and `outlineMaterial` props                                      |
| outlineIos                   | boolean | false                                                                           | Makes button outline in iOS theme                                                                              |
| outlineMaterial              | boolean | false                                                                           | Makes button outline in Material theme                                                                         |
| raised                       | boolean | undefined                                                                       | Makes button raised (with shadow). Overwrites `raisedIos` and `raisedMaterial` props                           |
| raisedIos                    | boolean | false                                                                           | Makes button raised (with shadow) in iOS theme                                                                 |
| raisedMaterial               | boolean | false                                                                           | Makes button raised (with shadow) in Material theme                                                            |
| rounded                      | boolean | undefined                                                                       | Makes button rounded. Overwrites `roundedIos` and `roundedMaterial` props                                      |
| roundedIos                   | boolean | false                                                                           | Makes button rounded in iOS theme                                                                              |
| roundedMaterial              | boolean | false                                                                           | Makes button rounded in Material theme                                                                         |
| segmented                    | boolean | false                                                                           | Renders segmented button, same as `<SegmentedButton>`                                                          |
| segmentedActive              | boolean | false                                                                           | Renders segmented active button, same as `<SegmentedButton active>`                                            |
| segmentedStrong              | boolean | false                                                                           | Renders segmented strong button, same as `<SegmentedButton strong>`                                            |
| small                        | boolean | undefined                                                                       | Makes button small. Overwrites `smallIos` and `smallMaterial` props                                            |
| smallIos                     | boolean | false                                                                           | Makes button small in iOS theme                                                                                |
| smallMaterial                | boolean | false                                                                           | Makes button small in Material theme                                                                           |
| tonal                        | boolean | undefined                                                                       | Makes button in tonal style (with semitransparent fill color). Overwrites `tonalIos` and `tonalMaterial` props |
| tonalIos                     | boolean | false                                                                           | Makes button in tonal style (with semitransparent fill color) in iOS theme                                     |
| tonalMaterial                | boolean | false                                                                           | Makes button in tonal style (with semitransparent fill color) in Material theme                                |
| touchRipple                  | boolean | true                                                                            | Enables touch ripple effect in Material theme                                                                  |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Buttons" />

    <i-block-title>Default Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button>Button</i-button>
        <i-button class="k-color-brand-red"> Button </i-button>
        <i-button>Button</i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button outline>Outline</i-button>
        <i-button class="k-color-brand-red" outline> Outline </i-button>
        <i-button outline>Outline</i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button clear>Clear</i-button>
        <i-button class="k-color-brand-red" clear> Clear </i-button>
        <i-button clear>Clear</i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button tonal>Tonal</i-button>
        <i-button class="k-color-brand-red" tonal> Tonal </i-button>
        <i-button tonal>Tonal</i-button>
      </div>
    </i-block>

    <i-block-title>Rounded Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button rounded>Button</i-button>
        <i-button rounded class="k-color-brand-green">Button</i-button>
        <i-button rounded>Button</i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button rounded outline> Outline </i-button>
        <i-button rounded outline class="k-color-brand-green">
          Outline
        </i-button>
        <i-button rounded outline> Outline </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button rounded clear> Clear </i-button>
        <i-button rounded clear class="k-color-brand-green"> Clear </i-button>
        <i-button rounded clear> Clear </i-button>
      </div>
    </i-block>

    <i-block-title>Large Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button large>Button</i-button>
        <i-button large class="k-color-brand-yellow">Button</i-button>
        <i-button large rounded> Button </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button large outline> Outline </i-button>
        <i-button large outline class="k-color-brand-yellow">
          Outline
        </i-button>
        <i-button large rounded outline> Outline </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button large clear> Clear </i-button>
        <i-button large clear class="k-color-brand-yellow"> Clear </i-button>
        <i-button large rounded clear> Clear </i-button>
      </div>
    </i-block>

    <i-block-title>Small Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button small>Button</i-button>
        <i-button small>Button</i-button>
        <i-button small rounded> Button </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button small outline> Outline </i-button>
        <i-button small outline> Outline </i-button>
        <i-button small rounded outline> Outline </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button small clear> Clear </i-button>
        <i-button small clear> Clear </i-button>
        <i-button small rounded clear> Clear </i-button>
      </div>
    </i-block>

    <i-block-title>Raised Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button raised>Button</i-button>
        <i-button raised>Button</i-button>
        <i-button raised rounded> Button </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button raised outline> Outline </i-button>
        <i-button raised outline> Outline </i-button>
        <i-button raised rounded outline> Outline </i-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <i-button raised clear> Clear </i-button>
        <i-button raised clear> Clear </i-button>
        <i-button raised rounded clear> Clear </i-button>
      </div>
    </i-block>

    <i-block-title>Disabled Buttons</i-block-title>
    <i-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <i-button disabled>Button</i-button>
        <i-button disabled outline>Outline</i-button>
        <i-button disabled clear>Clear</i-button>
      </div>
    </i-block>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iButton,
    iBlock,
    iBlockTitle,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iButton,
      iBlock,
      iBlockTitle,
    },

  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
} from 'ina-ui/react';

export default function ButtonsPage() {
  return (
    <Page>
      <Navbar
        title="Buttons"
        />

      <BlockTitle>Default Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button>Button</Button>
          <Button className="k-color-brand-red">Button</Button>
          <Button>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button outline>Outline</Button>
          <Button className="k-color-brand-red" outline>
            Outline
          </Button>
          <Button outline>Outline</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button clear>Clear</Button>
          <Button className="k-color-brand-red" clear>
            Clear
          </Button>
          <Button clear>Clear</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button tonal>Tonal</Button>
          <Button className="k-color-brand-red" tonal>
            Tonal
          </Button>
          <Button tonal>Tonal</Button>
        </div>
      </Block>

      <BlockTitle>Rounded Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded>Button</Button>
          <Button rounded className="k-color-brand-green">
            Button
          </Button>
          <Button rounded>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded outline>
            Outline
          </Button>
          <Button rounded outline className="k-color-brand-green">
            Outline
          </Button>
          <Button rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded clear>
            Clear
          </Button>
          <Button rounded clear className="k-color-brand-green">
            Clear
          </Button>
          <Button rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Large Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button large>Button</Button>
          <Button large className="k-color-brand-yellow">
            Button
          </Button>
          <Button large rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large outline>
            Outline
          </Button>
          <Button large outline className="k-color-brand-yellow">
            Outline
          </Button>
          <Button large rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large clear>
            Clear
          </Button>
          <Button large clear className="k-color-brand-yellow">
            Clear
          </Button>
          <Button large rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button small>Button</Button>
          <Button small>Button</Button>
          <Button small rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small outline>
            Outline
          </Button>
          <Button small outline>
            Outline
          </Button>
          <Button small rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small clear>
            Clear
          </Button>
          <Button small clear>
            Clear
          </Button>
          <Button small rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Raised Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised>Button</Button>
          <Button raised>Button</Button>
          <Button raised rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised outline>
            Outline
          </Button>
          <Button raised outline>
            Outline
          </Button>
          <Button raised rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised clear>
            Clear
          </Button>
          <Button raised clear>
            Clear
          </Button>
          <Button raised rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Disabled Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button disabled>Button</Button>
          <Button disabled outline>
            Outline
          </Button>
          <Button disabled clear>
            Clear
          </Button>
        </div>
      </Block>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/7.button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.