ArrowButton

PreviousNext

A round button displaying an arrow

'use client';

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

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

Installation

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

Usage

import ArrowButton from '@/docs/lib/ui/arrow-button';
 
export function Component() {
  return <ArrowButton icon="ArrowDefaultRight" color="saffron" />;
}

API Reference

Arrow Button

PropTypeDefaultDescription
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

'use client';

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

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

'use client';

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

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

'use client';

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

export function ArrowButtonLeftDemo() {
  return <ArrowButton icon="ArrowDefaultLeft" color="saffron" />;
}

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

'use client';

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

export function ArrowButtonTailDemo() {
  return <ArrowButton icon="ArrowTailRight" color="saffron" />;
}

Notes