> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonui/navigation/backbutton.md).

# BackButton

A button used to go back to the previous screen. To be used with the `Bar` component. Adapts to the space available.

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

```jsx
import { BackButton, Bar, Main } from '@aragon/ui'

function App() {
  return (
    <Main>
      <Bar primary={<BackButton onClick={() => goBack()} />} />
    </Main>
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-6a985e289c3511e3609ef12d9d830c2ca9b88883%2FSchermata%202022-06-25%20alle%2022.22.47.png?alt=media)

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

> Additional props will get passed to the internal `ButtonBase` component.

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

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | `"Back"`      |

The label displayed on the button.

#### `onClick` <a href="#onclick" id="onclick"></a>

| TYPE                  | DEFAULT VALUE |
| --------------------- | ------------- |
| `Function`: `() -> *` | None          |

Gets called when the user activates the button, by either clicking on it or using the enter key of the keyboard.