2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Buttons

Use the button component inside forms, as a link, social login, payment options with support for multiple styles, colors, and sizes.

In any user interface or website, the button element is most frequently used because it can be used to initiate an action as well as link to other pages.

Skewind provides a large variety of styles and sizes for the button component, including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Overviews

These are some overviews of the buttons. Use the options to switch between various styles, sizes, and variants.

Buttons

Variants
Size
Icons

Basic Usage

The button class can be used on <a>, <button>, <input type"submit">, etc. Example:

Anchor

Color Schemes

To change the color schemes, use Skewind's scheme-{color} utility classes. You can also switch to a softer scheme by appending the button--soft class to the button element. Take a look at these examples:

Button Variants

The variant of the button is button--solid by default, just like the examples above. We provide a few more styles that are listed below. Append the button--{style} class to set button styles.

Outline

button--outline

Softer Outline

button--outline button--soft

Flat

button--flat

Softer Flat

button--flat button--soft

More Examples

With Icons

Let's add some icons to make it look more interesting. Wrap button text with an element. And finally, add the icon element as the first or/and last child of the button. For example:

Icon Only

Sometimes you need a button to indicate an action using only an icon.

Button Pills

You can also use TailwindCSS rounded-full utility to make pill-shaped buttons.

Button Sizes

Set the button size to your needs with the button--{size} class. button--md is the default.