<commit_before>title: Button
---
Quasar has a component called QBtn which is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect by default when building with Material theme.
<input type="hidden" data-fullpage-demo="buttons/btn">

The button component also comes with a spinner or loading effect. You would use this for times when app execution may cause a delay and you want to give the user some feedback about that delay. When used, the button will display a spinning animation as soon as the user clicks the button.

When not disabled or spinning, QBtn emits a `@click` event, as soon as it is clicked or tapped.

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: ['QBtn']
}
```

## Basic Usage
``` html
<!-- Just label -->
<q-btn label="New item" />

<!-- Just icon -->
<q-btn icon="map" />

<!-- Icon & Label -->
<q-btn icon="create" label="New item" />
```

A standard round button.
```html
<!--
  Notice "round" specified and
  self-closing tag (as we don't need to specify any
  content for button -- the icon fills all available
  space anyway). The label is discarded.
-->
<q-btn round color="secondary" icon="card_giftcard" />

<!--
  Next is perfectly equivalent, but use "icon"
  property whenever you can.
-->
<q-btn round color="secondary">
  <q-icon name="card_giftcard" />
</q-btn>
```

> **IMPORTANTe**
> For round buttons, only use an icon as content, through "icon" property or QIcon component as the only child. Do not add anything else besides the icon, unless you want a Popover or Tooltip.

Primary colored button of small size:

``` html
<q-btn
  color="primary"
  size="sm"
  label="Edit"
/>
```

Button with "loading" state (we'll go over these in more detail in its own section later):

```html
<!-- Regular shaped -->
<q-btn
  loading
  color="primary"
  @click="clickMethod"
  label="Button Label"
/>
```

```html
<template>
  <!-- Round shaped (only use icon or spinner as content!) with loading state -->
  <q-btn
    :loading="loading"
    round<commit_msg>Update button.md (#400)<commit_after>title: Button
---
Quasar has a component called QBtn which is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect by default when building with Material theme.
<input type="hidden" data-fullpage-demo="buttons/btn">

The button component also comes with a spinner or loading effect. You would use this for times when app execution may cause a delay and you want to give the user some feedback about that delay. When used, the button will display a spinning animation as soon as the user clicks the button.

When not disabled or spinning, QBtn emits a `@click` event, as soon as it is clicked or tapped.

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: ['QBtn']
}
```

## Basic Usage
``` html
<!-- Just label -->
<q-btn label="New item" />

<!-- Just icon -->
<q-btn icon="map" />

<!-- Icon & Label -->
<q-btn icon="create" label="New item" />
```

A standard round button.
```html
<!--
  Notice "round" specified and
  self-closing tag (as we don't need to specify any
  content for button -- the icon fills all available
  space anyway). The label is discarded.
-->
<q-btn round color="secondary" icon="card_giftcard" />

<!--
  Next is perfectly equivalent, but use "icon"
  property whenever you can.
-->
<q-btn round color="secondary">
  <q-icon name="card_giftcard" />
</q-btn>
```

> **IMPORTANT**
> For round buttons, only use an icon as content, through "icon" property or QIcon component as the only child. Do not add anything else besides the icon, unless you want a Popover or Tooltip.

Primary colored button of small size:

``` html
<q-btn
  color="primary"
  size="sm"
  label="Edit"
/>
```

Button with "loading" state (we'll go over these in more detail in its own section later):

```html
<!-- Regular shaped -->
<q-btn
  loading
  color="primary"
  @click="clickMethod"
  label="Button Label"
/>
```

```html
<template>
  <!-- Round shaped (only use icon or spinner as content!) with loading state -->
  <q-btn
    :loading="loading"
    round
{'fraction_non_alphanumeric': 0.12373081463990555, 'fraction_numerical': 0.0007083825265643448, 'mean_word_length': 3.7276785714285716, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2238673', 'n_tokens_mistral': 1267, 'n_tokens_neox': 1222, 'n_words': 567}