---
name: TextButton
menu: Components
---

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

# TextButton

### Try it out

export const code = `<TextButton>Take Some Action</TextButton>`

<LiveProvider code={code} scope={{ TextButton }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

- `TextButton` components should not be used for navigation between pages without modification.
- If you want to make a link/anchor look like a button, there are a couple of solutions, depending on whether or not you are using Typescript. However, this will modify the button's styles.
  - JSX Solution:
  ```jsx
  <TextButton as={Link} to="/path/to/something">
    Go Somewhere!
  </TextButton>
  ```
  - TSX Solution:
  ```tsx
  const TextButtonLink = Button.withComponent(Link)
  <TextButtonLink to='/path/to/something'>Go Somewhere!</TextButtonLink>
  ```
- Buttons should not be placed within paragraphs of text and instead should be in a distinct section.
- Multiple buttons in a line should be separated with a | (pipe) and extra 4px spacing

<>

<TextButton>
Button One
</TextButton>
{' | '}
<TextButton>
Button Two
</TextButton>
</>

## Basic usage

```jsx
import { TextButton } from '@repay/cactus-web'
...
// Basic usage
<TextButton>
  Basic Text Button
</TextButton>

// Call to action variant
<TextButton variant="action">
  Take Some Action
</TextButton>

// Inverse
<TextButton inverse>
  Inversed Text Button
</TextButton>

// Disabled
<TextButton disabled>
  Disabled Text Button
</TextButton>
```

## Text + Icon Button

You can combine icons with the `TextButton` component to get a text button with an icon.

Example:

```jsx
import { TextButton } from '@repay/cactus-web'
import { StatusCheck } from '@repay/cactus-icons'
...
// Text + Icon Button
<TextButton>
  <StatusCheck />Check!
</TextButton>
```

## Properties

<PropsTable of={TextButton} />