Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
The standard button creates a white background and subtle hover animation. It’s meant to look and behave as an interactive element of your page.
You can use `color` prop to choose color for your button. The big range of available colors will help you show your buttons’ purpose and make them easy to spot.
set `size` prop to `lg` or `sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
Add the `loading` prop to show a button’s loading state, which can be useful in the case of operations that take longer to process.
add `outline` prop, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.
Use the `ghost` prop to make your button look simple yet aesthetically appealing.
Set the 'icon' property to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.
You can use `button` or `a` tags as a base for your Button.
Specifies the button's type.
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.