Buttons are fundamental elements in web and app design, allowing users to interact with your content and perform actions. The Basic Buttons component provides a range of button styles that you can easily incorporate into your project. These buttons come in various color variants to suit your design needs.
Buttons are essential for user interaction in your web or app project. The Basic Buttons component provides a wide range of styles and customization options to ensure your buttons are not only functional but also visually appealing.
The Button Sizes component allows you to adjust the size of buttons to match your design requirements. Whether you need small, medium, or large buttons, this feature ensures that your buttons fit seamlessly within your user interface.
Button Sizes provide the flexibility you need to create buttons that seamlessly integrate with your project's design. Whether you want small, medium, or large buttons, you can easily achieve the desired button size with this component.
The Button Link component allows you to create buttons that function as links. These buttons are versatile and can be used to navigate to different sections of your website or external URLs.
Button Link components offer a seamless way to incorporate interactive links into your web project. Use them to create buttons that guide users to different sections of your website or external URLs, enhancing user experience and navigation.
Elevated buttons are designed to stand out and provide visual depth. They add a sense of interactivity to your user interface, making it clear that these are clickable elements. This section covers elevated buttons in various styles.
Elevated buttons are an effective way to enhance the interactivity and visual appeal of your user interface. They offer a clear indication of clickable elements and can be customized to match your design preferences.
Social media buttons are essential for connecting with your audience and promoting your content across various platforms. This section covers social media buttons with different icons and styles.
Use these social media buttons strategically to promote your content and connect with your users on their preferred platforms, ultimately driving engagement and growth.
Outline buttons provide a subtle and stylish way to present actions or choices to your users. They maintain a clean and minimalist appearance while offering clear interaction points.
Use outline buttons for actions like form submissions, navigation, or as alternatives to regular buttons to enhance your website or application's overall user experience.
Loading state buttons are an essential part of a user-friendly interface. They indicate ongoing actions, such as saving, adding, loading, or deleting, and provide feedback to users while they wait for a process to complete.
Consider using loading state buttons for actions like saving, adding, loading data, or deleting items to improve the overall usability of your website or application.
Rounded buttons provide a visually pleasing and modern touch to your user interface. They soften the edges of traditional buttons, making them appear more inviting and user-friendly. This section explores how to use rounded buttons effectively in your project.
Consider using rounded buttons for various actions, such as primary actions, secondary actions, success notifications, and more, to make your UI elements more aesthetically pleasing and approachable.
Soft color buttons add a touch of elegance and subtlety to your user interface. These buttons use gentle, muted colors that are visually appealing without being too overpowering. In this section, you'll learn how to use soft color buttons effectively in your project.
Soft color buttons provide a subtle yet visually appealing option for your UI elements. Their gentle colors can enhance the aesthetics of your user interface without overwhelming the user.
Icon buttons allow you to incorporate meaningful icons into your user interface for various actions or functions. In this section, you'll discover how to use icon buttons effectively and enhance your user experience.
Consider using icon buttons to streamline user interactions, convey meaning at a glance, and create a more intuitive interface for your audience.
Icon-only buttons are a powerful tool for creating minimalist and intuitive user interfaces. In this section, you'll learn how to use icon-only buttons effectively to enhance the usability and aesthetics of your web or app project.
Icon-only buttons are an excellent choice for modern user interfaces, offering simplicity, clarity, and a sleek design. Whether you're designing a mobile app or a web application, consider using icon-only buttons to create a user-friendly and visually appealing interface that keeps users engaged and informed.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the button (default is "button" or "a") |
| `size` | `Size` | Size of the button ("sm" or "lg") |
| `variant` | `Variant` | Variant of the button style |
| `elevated` | `boolean` | Indicates if the button has an elevated shadow |
| `rounded` | `boolean` | Indicates if the button is rounded |
