Buttons

Buttons are the most important UI Element in each page, @ubeac/svelte buttons are beautiful and fully customizable.

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 button or a tags as a base for your Button.

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.

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.

Use the ghost prop to make your button look simple yet aesthetically appealing.

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.

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.

Label your button with text and add an icon to communiacate the action and make it easy to identify for users.

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.

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.