Button

PreviousNext

A versatile button component that supports multiple visual styles, sizes, and can render as a button, anchor, or custom element

PrimarySecondaryTertiary
'use client';

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

export function ButtonDemo() {
  return (
    <div>
      Primary
      <Button color="saffron" theme="solid" variant="pill">
        Click me
      </Button>
      Secondary
      <Button color="saffron" size="medium" theme="solid" variant="pill">
        Click me
      </Button>
      Tertiary
      <Button color="saffron" size="small" theme="solid" variant="pill">
        Click me
      </Button>
    </div>
  );
}

Installation

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

Usage

import { Button } from '@/docs/lib/ui/Button';
 
export function Component() {
  return (
    <Button color="saffron" size="medium" theme="solid" variant="pill">
      Click me
    </Button>
  );
}

API Reference

Button

PropTypeDefaultDescription
color"black" | "darkGrey" | "green" | "lavender" | "lightGrey" | "lightSand" | "marygold" | "orange" | "red" | "saffron" | "sand" | "sienna" | "ultramarine" | "verdigris" | "wave" | "white" | "current""saffron"The color theme of the button
iconIconicNamesundefinedOptional icon name from the Trident Icons library
iconTypeIconicTypesundefinedForce the icon type to be svg, font or default
iconWidthstringundefinedCustom width for the icon (e.g., "24px")
size"small" | "medium" | "large""medium"The size of the button
theme"outline" | "solid""solid"The visual style of the button - solid for filled background, outline for border only
variant"circle" | "pill""pill"The shape of the button - circle for circular buttons, pill for rounded rectangular buttons
component"button" | "a" | "span" | "div" | ReactElement"button"The underlying HTML element or React component to render
disabledbooleanfalseWhether the button is disabled (sets disabled attribute or aria-disabled for anchors)
childrenReactNodeundefinedThe content to display inside the button

Examples

'use client';

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

export function ButtonOutlineDemo() {
  return (
    <Button color="saffron" size="medium" theme="outline" variant="pill">
      Learn more
    </Button>
  );
}

'use client';

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

export function ButtonSmallDemo() {
  return (
    <Button color="ultramarine" size="small" theme="solid" variant="circle">
      hi!
    </Button>
  );
}

'use client';

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

export function ButtonLargeDemo() {
  return (
    <Button color="saffron" size="large" theme="solid" variant="circle">
      Get started
    </Button>
  );
}

'use client';

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

export function ButtonIconDemo() {
  return (
    <Button color="saffron" size="medium" theme="solid" variant="pill" icon="ArrowDefaultRight">
      Continue
    </Button>
  );
}

'use client';

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

export function ButtonDisabledDemo() {
  return (
    <Button color="saffron" size="medium" theme="solid" variant="pill" disabled>
      Submit
    </Button>
  );
}

'use client';

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

export function ButtonCircleDemo() {
  return (
    <Button color="saffron" size="medium" theme="solid" variant="circle" icon="HeartOutlined">
      <span className="sr-only">Add to favorites</span>
    </Button>
  );
}

Notes

  • The Button component is polymorphic and can render as a <button>, <a>, <span>, <div>, or any custom React component
  • When component="a" or an href prop is provided, the button renders as an anchor element with appropriate accessibility attributes
  • The disabled prop sets the native disabled attribute on button elements and aria-disabled on anchor and fake button elements
  • All standard HTML button attributes (onClick, onFocus, etc.) are supported and forwarded to the underlying element
  • The component automatically handles button type, defaulting to type="button" to prevent form submission