Components / inputs
Calendar Day
A single day cell in a Calendar. Selected uses the brand fill, Today an outline, Outside dims days from the adjacent month, Disabled marks unavailable dates.
import { CalendarDay } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { CalendarDay } from '@basiiik/ui';
<CalendarDay date={new Date(2026, 8, 15)}>Calendar Day</CalendarDay>- Example values were filled in for the required prop date: replace them with your own.
- Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
- Hover and Focused are CSS. Selected, Today, Outside and Disabled are props; Disabled uses aria-disabled so the day stays reachable by arrow keys.
- Storybook: Inputs/Calendar.
Props
| Prop | Type | Notes |
|---|---|---|
size | "sm" | "md" | Default "md" |
children | string | |
selected | boolean | |
today | boolean | |
disabled | boolean | |
outside | boolean | |
date required | Date |
Other props
| Prop | Type | What it does |
|---|---|---|
locale | string |
States. Hover and Focused are CSS. Selected, Today, Outside and Disabled are props; Disabled uses aria-disabled so the day stays reachable by arrow keys.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Only inside a Calendar
Do not use it when
- Standalone buttons (use Button)
Rules for agents
- Calendar renders its days; use CalendarDay directly only for a custom grid
- Set selected, today, disabled and outside from the date, and pass locale so the accessible name is the full localised date
- disabled uses aria-disabled so the day can still be reached with the arrow keys
Avoid
- Using CalendarDay as a generic small button (use Button or Icon Button)
- Showing selected, today and focus by colour alone
Keyboard
- Enter and Space select the day
Accessibility
- aria-selected on the chosen day
- aria-current="date" on today
- aria-disabled on unavailable dates
- Accessible name is the full date, for example "September 15, 2026"
Colour tokens it reads
color.bg.brand.defaultcolor.bg.subtlecolor.border.brandcolor.border.focuscolor.text.brandcolor.text.disabledcolor.text.on-brandcolor.text.primarycolor.text.tertiaryRelated
inputs 14 Figma variants Try it in the live demo