---
labels: ['react', 'typescript', 'input', 'button']
description: 'base button'
---

<!-- import Button from './button'; -->

Base button, with very basic styles.  
Accepts all parameters of native html button.

## Loading

The base-ui button has built in support for loading!  
Simply return a Promise from `onClick`, and button will automatically show a loader until it resolves.

```tsx live=true
<button onClick={() => new Promise((res) => setTimeout(res, 1500))}>
  Click here to see loader
</button>
```

You can also turn on the loading animation explicitly, using the `loading={isBusy}` prop.

> Using and maintaining a promise is usually easier and more flexible.  
> Prefer using it when possible, and avoid the explicit `loading` prop.

```tsx live=true
<button loading>loading button</button>
```

## Multi trigger

By default, the button is disabled while loading (to prevent duplicate triggers). This can be changed by using the `activeWhenLoading` prop.

```tsx live=true
<>
  <button
    onClick={() => new Promise((res) => setTimeout(res, 1000))}
    activeWhenLoading
  >
    click me repeatedly
  </button>{' '}
  <button onClick={() => new Promise((res) => setTimeout(res, 1000))}>
    (cannot) click me repeatedly
  </button>
</>
```