Chakra-UI

I♥️Components

Button

|

Chakra Docs

|

⦾ The Button component in Chakra UI serves as a trigger to initiate an action or event. This can include submitting a form, launching a dialog box, aborting an ongoing action, or executing a delete operation. Together with the ButtonGroup component, these provide a set of accessible and customizable UI components for React applications. Here's an overview of the Button and ButtonGroup components:

Here's an overview of the Button and ButtonGroup components:

  • Button: This component is used to render a clickable button element with various styles and configurations. Variants include primary, secondary, outline, ghost, and more. It provides built-in styles for different sizes, including small, medium, and large. You can customize the appearance of the button by applying different props such as color, variant, size, and more. It supports adding icons, loading spinners, and tooltips to buttons. You can attach event handlers to handle button clicks and other interactions.
  • ButtonGroup: This component is used to group multiple buttons. It provides a convenient way to arrange and style related buttons as a cohesive unit. Buttons within a ButtonGroup can be automatically spaced and styled using predefined or custom spacing. It supports responsive behavior, allowing buttons to stack vertically on smaller screens. You can apply additional styling and configurations to the ButtonGroup component, such as size, variant, and color.

Both the Button and ButtonGroup components have extensive customization options and can be easily integrated into your React application. They follow best practices for accessibility and provide a consistent and user-friendly interface.

Button Properties: The Button component comes with several properties to allow you to customize its look and behavior. Some of the most commonly used ones include:

  • variant: This property allows you to specify the variant of the button. The available variants include solid, outline, ghost, link, and unstyled. The default value is solid
  • colorScheme: This property allows you to specify the color scheme of the button. The available color schemes include gray, red, orange, yellow, green, teal, blue, cyan, purple, pink, and linkedin. The default value is gray.
  • size: This property allows you to specify the size of the button. The available sizes include xs, sm, md, lg, and xl. The default value is md.
  • isLoading: This property allows you to specify whether the button is in a loading state. The default value is false.
  • isDisabled: This property allows you to specify whether the button is disabled. The default value is false.
  • isFullWidth: This property allows you to specify whether the button should take up the full width of its container. The default value is false.
  • leftIcon: This property allows you to specify an icon to be displayed on the left side of the button. The default value is undefined.
  • rightIcon: This property allows you to specify an icon to be displayed on the right side of the button. The default value is undefined.
  • spinner: This property allows you to specify a custom loading spinner. The default value is undefined. spinnerPlacement then allows you to specify the placement of the spinner. The available options include start and end. The default value is end.

These components can be imported as follows:

Examples

Basic Usage

⦾ Below we have two buttons with the default settings. This is the most basic use of the Button component.

Code

Pre-defined Button Sizes

⦾ Buttons can be displayed in different sizes using the 'size' prop. This property accepts four possible values: 'xs', 'sm', 'md', and 'lg'. Below is an example demonstrating how to create buttons of various sizes. Each button's size is set using the 'size' prop, and all of them share the 'cyan' colorScheme.

Code

Button Variants

⦾ Buttons can also be displayed in different styles using the variant prop. This prop accepts four values: 'solid', 'ghost', 'outline', and 'link'. Here's an example of buttons in different variants, again using the color scheme cyan.

Code

Variant, Color, and Style Combinations

⦾ It is only fair that I supply you with a way to try out any of the combinations of the above mentioned properties as you like. So below I am giving you just that. Select a value for each, and you can see what the combination would look like on a light and dark background.

Code

Buttons with Icons

⦾ The Button component can have icons to its left and right, which are specified using the leftIcon and rightIcon props, respectively. Below are two examples of buttons with icons.

Code

Adding a Spinner

⦾ In this example, we've created a button that toggles an isLoading state when clicked. The isLoading state is used in the isLoading prop of the Button component which, when true, shows a spinner and loading text (provided by the loadingText prop). We use setTimeout to simulate a delay (2000 milliseconds or 2 seconds in this case) before resetting the isLoading state.

Code

Did you know?

Creative Idea No. 1

Toggle Button: This is a simple button that toggles its text and color based on its state. This type of functionality for a button can enhance user experience, especially when the button's state is relevant to the user's action.

Code

Creative Idea No. 2

Countdown Button: This is a creative use of the Button component where the button acts as a countdown. After being clicked, the button starts a countdown, preventing another click until the countdown is over. This can be used for submitting forms, starting games, etc.

Code

Creative Idea No. 3

Button with Tooltip: Chakra's Tooltip component can be used to display additional information when hovering over an element. It can be used with a Button to provide users with more context about what the button does. In this example, when a user hovers over the "Save" button, they'll see a tooltip that says "This button saves your changes", providing additional context that can improve the user experience.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.