Button
The Button element in web development is an HTML element used to create interactive buttons that users can click or tap to trigger specific actions or functions on a web page. The <button> element is an essential part of web forms, user interfaces, and general interactivity.
Installation
Ensure that have the @zyxui library installed in your project:
If you haven't install and setup @zyxui before please follow the installation guide
Basic Button
To create a basic button, simply use the Button component without passing any props. It will inherit the primary color as the default.
Customization
The Button component is highly customizable, allowing you to fine-tune its appearance and behavior to align with your project's unique requirements. Explore the following customization options:
Colors
Our Button component offers a color palette with options such as default, error, warning, and success. To customize these default colors to align with your project's aesthetics, consult How to customize themes in @@zyxui/button.
Variants
Modify Button styles effortlessly using the variant prop, with options like solid, bordered, light, ghost, flat, and shadow.
Sizes
Resize your buttons effortlessly with the size prop. Choose from sm (Small), md (Medium), or lg (Large) to control the button dimensions.
Radiuses
Easily customize the border-radius of your button using the radius prop, with options like sm,md, lg, circle, or none.
Start Content
The startContent prop allows you to seamlessly incorporate ReactNode elements at the beginning of a button's child. For instance, you can employ this feature to place an icon at the start of a button.
End Content
The endContent prop enables the addition of ReactNode elements at the end of a button's child. For instance, this feature is ideal for appending an icon to the button's end.
Start & End Content
Here are more examples to show you that startContent & endContent can be used together!
Icon Only
Create icon-only buttons with ease using the iconOnly prop. Use icons from libraries or custom SVGs to design your unique buttons.
Recommendation
It is highly recommended to leverage the extensive collection of icons available in the `lucide-react` icon library. This library offers a vast selection of beautifully crafted icons to enhance your design.
API Reference
For an in-depth exploration of available props and advanced usage, consult the Button component's API reference:
| Property | Description | Type | Default |
|---|---|---|---|
| className | Adding custom class names to your button. | string | undefined |
| color | Customize button color styles. | default | error | warning | success | default |
| variant | Change button hover and base styles. | solid | bordered | light | ghost | flat | shadow | solid |
| size | Adjust button size to your specifications. | sm | md | lg | md |
| radius | Change button border radius style. | sm | md | lg | circle | none | md |
| iconOnly | Craft buttons with exclusive focus on icons. | boolean | false |
| startContent | Enrich buttons with content at the start see example. | ReactNode | undefined | undefined |
| endContent | Elevate buttons with content at the end. see example | ReactNode | undefined | undefined |