Button
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 solidcolorScheme
: 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
Code
Pre-defined Button Sizes
Code
Button Variants
Code
Variant, Color, and Style Combinations
Code
Buttons with Icons
Code
Adding a Spinner
Code
Did you know?
Creative Idea No. 1
Code
Creative Idea No. 2
Code
Creative Idea No. 3
Code
copyright © 2023 IHeartComponents | evanmarie.com
created with love by the I♥️Components team using
Special thanks to Stefan Bohacek / Generative Placeholders.