---
title: ArrowButton
description: A round button displaying an arrow
---

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonDemo() {
  return <ArrowButton icon="ArrowDefaultRight" color="saffron" aria-label="Next slide" />;
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/arrow-button.json
```

## Usage

```tsx showLineNumbers
import ArrowButton from '@/docs/lib/ui/arrow-button';

export function Component() {
  return <ArrowButton icon="ArrowDefaultRight" color="saffron" />;
}
```

## API Reference

### Arrow Button

| Prop    | Type                                                                                                                                                                                                      | Default          | Description |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
| `color` | `"black" \| "darkGrey" \| "green" \| "lavender" \| "lightGrey" \| "lightSand" \| "marygold" \| "orange" \| "red" \| "saffron" \| "sand" \| "sienna" \| "ultramarine" \| "verdigris" \| "wave" \| "white"` | `"saffron"`      |             |
| `icon`  | `"ArrowDefaultRight" \| "ArrowDefaultLeft" \| "ArrowTailLeft" \| "ArrowTailRight"`                                                                                                                        | `"ArrowDefault"` |             |

## Examples

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonAccessibleDemo() {
  return (
    <ArrowButton icon="ArrowDefaultRight" color="saffron">
      Next slide
    </ArrowButton>
  );
}
```

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonDisabledDemo() {
  return <ArrowButton icon="ArrowDefaultRight" disabled color="saffron" aria-label="Next slide" />;
}
```

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonLeftDemo() {
  return <ArrowButton icon="ArrowDefaultLeft" color="saffron" aria-label="Previous slide" />;
}
```

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonOutlineDemo() {
  return (
    <div className="bg-ultramarine p-8 rounded">
      <ArrowButton icon="ArrowDefaultRight" color="white" theme="outline" aria-label="Next slide" />
    </div>
  );
}
```

```tsx
'use client';

import { ArrowButton } from '@/ui/buttons/ArrowButton';

export function ArrowButtonTailDemo() {
  return <ArrowButton icon="ArrowTailRight" color="saffron" aria-label="Next" />;
}
```

## Notes