# Button

A simple Button component, available in different modes.

Even though `children` can be used to set its content, it is generally preferred to use `label` and `icon`. It will make it possible for the `Button` to adapt in certain cases: for example, when used in the `Header` component, it will automatically switch between a label and an icon, depending on the viewport size (except if `display` is set to something else than `auto`).

## Usage <a href="#usage" id="usage"></a>

```jsx
function App() {
  return <Button label="Click me" />
}
```

## Demonstration

![](/files/q5P07MwC4fGixLn2w087)

## Props <a href="#props" id="props"></a>

#### `label` <a href="#label" id="label"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

The textual content of the button.

#### `icon` <a href="#icon" id="icon"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

The icon to incorporate in the button. When only an icon is desired, it is recommended to set a `label` with the `display` prop set to `"icon"`: the label will then be set on the `title` attribute of the element.

#### `display` <a href="#display" id="display"></a>

| TYPE                             | DEFAULT VALUE |
| -------------------------------- | ------------- |
| `auto`, `all`, `icon` or `label` | `auto`        |

Use this prop to force a specific display mode.

#### **Example:**

```jsx
<Button icon={<IconDownload />} label="Download" />
```

#### `children` <a href="#children" id="children"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

Having children on a `Button` will override `label`, `icon`, and `display`. It is generally not recommended but can be useful in some situtations.

#### `mode` <a href="#mode" id="mode"></a>

| TYPE                                       | DEFAULT VALUE |
| ------------------------------------------ | ------------- |
| `normal`, `strong`, `positive`, `negative` | `normal`      |

Set this property to the desired variant.

#### **Example:**

```jsx
<Button mode="strong">Accept</Button>
```

#### `size` <a href="#size" id="size"></a>

| TYPE                        | DEFAULT VALUE |
| --------------------------- | ------------- |
| `medium`, `small` or `mini` | `medium`      |

Use this property to change the size of the button.

#### **Example:**

```jsx
<Button size="small">Accept</Button>
```

#### `wide` <a href="#wide" id="wide"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `false`       |

Set to true to obtain a button that expands horizontally.

#### **Example:**

```jsx
<Button wide>Accept</Button>
```


---

# Agent Instructions: 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://legacy-docs.aragon.org/developers/tools/aragonui/actions/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.