Button
Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.
Components
Chakra UI provides prebuild components to help you build your projects faster. Here is an overview of the component categories:
Forms
Checkbox
Checkbox component is used in forms when a user needs to select multiple values from several options.
Editable
EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.
Form Control
Form Control provides context such as isInvalid, isDisabled, and isRequired to form elements
Icon Button
Icon button renders an icon within in a button.
Input
Input component is a component that is used to get user input in a text field.
Number Input
The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.
Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Radio
Radios are used when only one choice may be selected in a series of options.
Range Slider
The RangeSlider is a multi thumb slider used to select a range of related values.
Select
Select component is a component that allows users pick a value from predefined options.
Slider
The Slider is used to allow users to make selections from a range of values.
Switch
The Switch component is used as an alternative for the checkbox component.
Textarea
The Textarea component allows you to easily create multi-line text inputs.
Data Display
Badge
Badges are used to highlight an item's status for quick recognition.
Code
Code is a component used to display inline code. It is composed from the Box component with a font family of `mono` for displaying code.
Divider
Dividers are used to visually separate content in a list or group.
Kbd
The keyboard key component exists to show which key or combination of keys performs a given action
List
List is used to display list items. It renders a <ul> element by default.
Stat
As the name implies, the Stat component is used to display some statistics.
Table
Table component is used to organize and display data efficiently. It renders a <table> element by default
Tag
Tag component is used for items that need to be labeled.
Feedback
Alert
Alerts are used to communicate a state that affects a system, feature or page.
Circular Progress
Circular Progress is used to indicates the progress for determinate and indeterminate processes.
Progress
Progress is used to display the progress status for a task that takes a long time or consists of several steps.
Skeleton
Skeleton is used to display the loading state of some component.
Spinner
Spinners provide a visual cue that an action is processing awaiting a course of change or a result.
Toast
The toast is used to show alerts on top of an overlay.
Typography
Overlay
Alert Dialog
AlertDialog component is used interrupt the user with a mandatory confirmation or action.
Drawer
The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
Menu
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
Modal
A dialog is a window overlaid on either the primary window or another dialog window.
Popover
Popover is a non-modal dialog that floats around a trigger.
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element.
Disclosure
Accordion
Accordions display a list of high-level options that can expand/collapse to reveal more information.
Tabs
A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern.
Visually Hidden
VisuallyHidden is a common technique used in web accessibility to hide content from the visual client
Navigation
Breadcrumb
Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products.
Link
Links are accessible elements used primarily for navigation.
LinkOverlay
Link overlay is a semantic component used to wrap elements (cards, blog post, articles, etc.) in a link.
SkipNav
Skip Nav Link allows keyboard users to skip to the main content of the page.
Media and icons
Other
Transitions
Chakra exports four components `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to provide simple transitions.
Portal
Renders a React subtree in a different part of the DOM.
Show / Hide
Show and Hide wrapper components render or not render the child elements if the media query matches.
Close Button
CloseButton is essentially a button with a close icon. It is used to handle the close functionality in feedback and overlay components like Alerts, Toasts, Drawers and Modals