Enterprise UI Kit

Calendar

Pick date button with variants like Button (primary, secondary, danger, outline).

How to use

Import Calendar and control value/onChange. Use triggerVariant and triggerLabel for the trigger button.

1. Import

tsx

import { Calendar } from "@/app/components/ui";

2. Basic usage

tsx

<Calendar
  value={date}
  onChange={setDate}
  triggerVariant="primary"
  triggerLabel="Pick date"
/>

3. All variants

Calendar trigger variantstsx

// Primary
<Calendar value={date} onChange={setDate} triggerVariant="primary" triggerLabel="Pick date" />

// Secondary
<Calendar value={date} onChange={setDate} triggerVariant="secondary" triggerLabel="Pick date" />

// Danger
<Calendar value={date} onChange={setDate} triggerVariant="danger" triggerLabel="Pick date" />

// Primary outline
<Calendar value={date} onChange={setDate} triggerVariant="primary-outline" triggerLabel="Pick date" />

// Secondary outline
<Calendar value={date} onChange={setDate} triggerVariant="secondary-outline" triggerLabel="Pick date" />

// Danger outline
<Calendar value={date} onChange={setDate} triggerVariant="danger-outline" triggerLabel="Pick date" />