DateRangeButtonProps
Props
The following table outlines the props for the DateRangeButtonProps:
| Name | Type | Default | Description |
|---|---|---|---|
| ariaExpanded | boolean | - | Sets the ARIA expanded attribute for accessibility, indicating whether the popup is open or closed. Essential for screen reader users to understand the button's expanded state. |
| ariaLabel | string | - | Adds an accessible ARIA label to the button for screen readers and accessibility tools. Essential for keyboard navigation and voice command support. |
| className | string | - | Adds a custom CSS class name to the button element for custom styling. Enables fine-grained style control through external CSS. |
| color | - | Specifies the semantic color of the button for visual hierarchy and intent communication. Options: 'Primary', 'Secondary', 'Warning', 'Success', 'Error', 'Info'. | |
| dateRangeContent | node | - | The custom React component or content to display within the date range button. Enables flexible date range representation. |
| disabled | boolean | - | When true, disables the button and prevents user interaction. Useful for conditional disabling based on state or permissions. |
| icon | ReactElement | - | An icon for the button, either as a CSS class name for icon fonts or as a React element. Enhances button visual clarity and user recognition. |
| isCalendarOpen | boolean | - | When true, indicates the calendar picker popup is currently visible. Controls the open/closed state of the date range selector. |
| onClick | (e?: React.SyntheticEvent) => void | - | Click handler function executed when the button is clicked. Receives the click event as a parameter. |
| onKeyDown | (e: React.KeyboardEvent) => void | - | Callback handler triggered when the user presses a keyboard key while the button has focus. Enables keyboard navigation and custom keyboard handling. |
| title | string | - | Adds a custom tooltip or title text displayed on button hover. Provides user guidance about the button's function. |
| variant | - | Specifies the visual style variant of the button for design flexibility. Options: 'Outlined', 'Filled', 'Standard' for different visual presentations. |