Button

Basic button

The Button comes with four variants: default, secondary, link, and error.

Info

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Modal windows
Forms
Cards
Toolbars

Prop	Type	Default
`variant`	`string`	-
`asChild`	`boolean`	-
`isLoading`	`boolean`	-
`loadingText`	`string`	-

Browser support

All Styledsea components were tested to work in the following browsers:

Chromium browsers 108+ – Chrome, Edge, Chrome for Android, etc
Firefox 101+
Safari 15.4+
IE (any version) is not supported

Sizes

For larger or smaller buttons, use the size prop.

Disabled state

To make Button disabled, set disabled prop, this will prevent any interactions with the button and add disabled styles.

Buttons with icons

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text.

leftSection and rightSection allow adding icons or any other element to the left and right side of the button. When a section is added, padding on the corresponding side is reduced.

Icon button

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

Loading

To set the button in a loading state, use the isLoading prop. You can also set a custom loading text by passing a string to loadingText.

Create anchor with asChild

Using the asChild asChild prop, we can wrap an anchor tag with the Button and render an anchor (<a/>) tag instead of a button.

Basic Buttons