---
title: Arrows
description: A component that displays two arrows side by side, one going forward, one going backward, for use in sliders or carousels
---

```tsx
'use client';

import { Arrows } from '@/ui/arrows/Arrows';

export function ArrowsDemo() {
  return (
    <Arrows
      iconType="ArrowDefault"
      isDisabledHidden={false}
      isNextDisabled={false}
      isPrevDisabled={false}
      labels={{ next: 'Next label', previous: 'Previous label' }}
      size="medium"
      className="w-full"
      onNext={() => {
        console.log('next');
      }}
      onPrev={() => {
        console.log('previous');
      }}
    />
  );
}
```

## Installation

Using the CLI:

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

Or manually, copy the following code into `/ui/arrows.tsx`:

```tsx
import clsx from 'clsx';
import type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';

import type { ArrowsLabels } from './ArrowsLabels';
// TODO: We need to migrate ArrowButton
import { ArrowButton } from '../buttons/ArrowButton';

export interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  color?: ComponentProps<typeof ArrowButton>['color'];
  describedby?: string;
  iconType?: 'ArrowDefault' | 'ArrowTail';
  isDisabledHidden?: boolean;
  isNextDisabled?: boolean;
  isPrevDisabled?: boolean;
  labels?: ArrowsLabels;
  onNext: ComponentProps<typeof ArrowButton>['onClick'];
  onPrev: ComponentProps<typeof ArrowButton>['onClick'];
  size?: ComponentProps<typeof ArrowButton>['size'];
  theme?: ComponentProps<typeof ArrowButton>['theme'];
}

export const Arrows: FunctionComponent<ArrowsProps> = ({
  className,
  color,
  describedby,
  iconType = 'ArrowDefault',
  isDisabledHidden = false,
  isNextDisabled = false,
  isPrevDisabled = false,
  labels = {
    next: '',
    previous: '',
  },
  onNext,
  onPrev,
  size,
  theme,
  ...attrs
}) => {
  return (
    <div
      {...attrs}
      className={clsx(
        'pointer-events-none flex w-full items-center justify-between gap-x-20',
        className,
      )}
      data-name="Arrows"
    >
      <ArrowButton
        className={clsx('pointer-events-auto transition-opacity', {
          'opacity-0': isDisabledHidden && isPrevDisabled,
        })}
        color={color}
        disabled={isPrevDisabled}
        icon={`${iconType}Left`}
        onClick={onPrev}
        size={size}
        theme={theme}
        aria-describedby={describedby}
      >
        {labels.previous}
      </ArrowButton>
      <ArrowButton
        className={clsx('pointer-events-auto transition-opacity', {
          'opacity-0': isDisabledHidden && isNextDisabled,
        })}
        color={color}
        disabled={isNextDisabled}
        icon={`${iconType}Right`}
        onClick={onNext}
        size={size}
        theme={theme}
        aria-describedby={describedby}
      >
        {labels.next}
      </ArrowButton>
    </div>
  );
};
```

## Usage

```tsx showLineNumbers
import Arrows from "@/docs/lib/ui/arrows";

export function Component() {
  return (
    <Arrows
      iconType="ArrowDefault"
      isDisabledHidden={false}
      isNextDisabled={false}
      isPrevDisabled={false}
      labels={{ next: "Next label", previous: "Previous label" }}
      size="medium"
      className="w-full";
    />
  )
}
```

## API Reference

### Arrows

| Prop               | Type                            | Default                        | Description |
| ------------------ | ------------------------------- | ------------------------------ | ----------- |
| `color`            | `any`                           | `undefined`                    |             |
| `iconType`         | `"ArrowDefault" \| "ArrowTail"` | `"ArrowDefault"`               |             |
| `isDisabledHidden` | `boolean`                       | `false`                        |             |
| `isNextDisabled`   | `boolean`                       | `false`                        |             |
| `isPrevDisabled`   | `boolean`                       | `false`                        |             |
| `labels`           | `ArrowsLabels`                  | `"{ next: "", previous: "" }"` |             |
| `onNext`           | `any`                           | `undefined`                    |             |
| `onPrev`           | `any`                           | `undefined`                    |             |
| `size`             | `any`                           | `undefined`                    |             |
| `theme`            | `any`                           | `undefined`                    |             |

## Examples

```tsx
'use client';

import { Arrows } from '@/ui/arrows/Arrows';

export function ArrowsDemo() {
  return (
    <div className="bg-darkGrey w-full h-full">
      <Arrows
        iconType="ArrowDefault"
        isDisabledHidden={false}
        isNextDisabled={false}
        isPrevDisabled={false}
        labels={{ next: 'Next label', previous: 'Previous label' }}
        size="medium"
        className="w-full"
        color="white"
        onNext={() => {
          console.log('next');
        }}
        onPrev={() => {
          console.log('previous');
        }}
      />
    </div>
  );
}
```

```tsx
'use client';

import { Arrows } from '@/ui/arrows/Arrows';

export function ArrowsDemo() {
  return (
    <Arrows
      iconType="ArrowDefault"
      isDisabledHidden={false}
      isNextDisabled={true}
      isPrevDisabled={true}
      labels={{ next: 'Next label', previous: 'Previous label' }}
      size="medium"
      className="w-full"
      onNext={() => {
        console.log('next');
      }}
      onPrev={() => {
        console.log('previous');
      }}
    />
  );
}
```

## Notes