Button #
Button is a component that can be used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Basic Buttons #
<div>
<button text="primary" class=" btn btn-primary">Click Me</button>
</div>
TIP
You can use class props for button type. Available types: class="btn-primary", class="btn-secondary", class="btn-success", class="btn-info", class="btn-danger", class="btn-warning",
Outline Buttons
You can use class props for for an outline button. For example: class="btn-outline-primary", class="btn-outline-secondary"
Light Color Buttons
Just add an extra class light to the class for a light color button. For example: class="btn-primary light", type="btn-secondary light"
Raised Buttons
Just add an extra class shadow-base2 to the class for a raised button. For example: class="btn-primary shadow-base2", class="btn-secondary shadow-base2"
Rounded Buttons
Just add an extra class rounded-[999px] to the class for a rounded button. For example: class="btn-primary rounded-[999px]", class="btn-secondary rounded-[999px]"
Rounded Outline Buttons
Just add an extra class rounded-[999px] to the class for a rounded button. For example: class="btn-outline-success rounded-[999px]", class="btn-outline-secondary rounded-[999px]"
Icon Buttons
Just add an extra props icon to add and icon. For example: icon="heroicons-outline:newspaper". You can use iconPosition="right" props to move the icon on the right side.
Button Sizes
You can use class="btn-sm" props for small button and class="btn-xl" for large button.
Disabled Buttons
Just add an extra props isDisabled to make a button disabled.
Loading Buttons
Just add an extra props isLoading to make a button with loading animation.
Block Buttons
Just add an extra class block-btn to the class to make a block button. For example: class="btn-success lock-btn", class="btn-secondary lock-btn"