---
name: Button
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Button from './Button'
import cactusTheme from '@repay/cactus-theme'
import Link from '../Link/Link'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Button

## Best practices

- `Button` components typically should not be used for navigation between pages.
- If you want to make a link look like a button, you can use the `as` prop:
```jsx
<Button as="a" href="https://somedestination.com">
  Go Somewhere!
</Button>
```

## Basic Usage

### Try it out

export const code = `<Button variant='action' margin={20}>Take Some Action</Button>`

<LiveProvider code={code} scope={{ Button, Link }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>


## Properties

<PropsTable of={Button} />