Buttons
Primary default
Secondary
Tertiary
Ghost
Premium
Error
Attention
Success
Play
Loading
Display a loading effect by adding the.is-loading class name to your button.
Disabled
Disable a button by adding either a.is-disabled class name or a [disabled]attribute to your button.
Shining
Simply add the .is-shining class name to add a shiny animation to your button
In label
Display a textual feedback to your button by adding a[data-feedback="feedback message"] attribute to your button. The feeedback message is visible for 4 seconds.
In tooltip
You can choose to put the feedback in a tooltip message by adding a[data-feedback-icon="success || error || attention"] attribute to your button. Like the label feeedback, the message is visible for 4 seconds.
You can change the size of the button based on the screen size using the following class name: .{xx}:button-{xx}.
{xx} can be xs, sm, md, lg, xl.
You can create a button loader by placing aprogress-container inside your button. Head over to the Progress bar component To learn more about progress-container
Follow this structure to create a stretchable button. Use the.is-active class name to toggle the button on and off.
You can force a button stretch to be unstretch (hide its label) under a certain responsive threshold whether that button is active or not by using the following class name:.{xx}:button-unstretch.
{xx} can be xs, sm, md, lg, xl. Unlike the way responsive design work with Tailwind (see here), this works the other way and represents the maximum screen size it should work for.