Arrows

PreviousNext

A component that displays two arrows side by side, one going forward, one going backward, for use in sliders or carousels

'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

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

Usage

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

PropTypeDefaultDescription
coloranyundefined
iconType"ArrowDefault" | "ArrowTail""ArrowDefault"
isDisabledHiddenbooleanfalse
isNextDisabledbooleanfalse
isPrevDisabledbooleanfalse
labelsArrowsLabels"{ next: "", previous: "" }"
onNextanyundefined
onPrevanyundefined
sizeanyundefined
themeanyundefined

Examples

'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>
  );
}

'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