Button

The Button component is a versatile element that can be used to trigger various actions within your web application. It supports different styles and configurations, allowing you to customize its appearance and behavior based on your requirements.

Usage

The Button component can be used in various ways to suit different needs. Here are some examples of how to use the Button component:

Example 1: Basic Button

<div class="button">
    click me
</div>

click me

isloading: Loading State

<div class="button w-40" isloading="true" label="Sending....">
    <div class="text">Send Mail</div>
</div>

Send Mail

Attributes

isloading: When present, it indicates that the button is in a loading state.
label: Specifies the label to be displayed during the loading state. Update this attribute with a meaningful message, such as "Mail Sending...".

Example 2: Disabled Button

<div class="button" disabled>
    <div class="text">New Mail</div>
    <div class="icon">
        <img src="/mail.svg" alt="Mail Icon">
    </div>
</div>

Example 3: Anchor Button

<a href="/mail/help" class="button">
    Mail Help?
</a>

Example 4: Icon-only Button

<button class="button" align="icon">
    <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M18 2 A 3 3 0 0 0 15 5 A 3 3 0 0 0 15.054688 5.5605469L7.9394531 9.7109375 A 3 3 0 0 0 6 9 A 3 3 0 0 0 3 12 A 3 3 0 0 0 6 15 A 3 3 0 0 0 7.9355469 14.287109L15.054688 18.439453 A 3 3 0 0 0 15 19 A 3 3 0 0 0 18 22 A 3 3 0 0 0 21 19 A 3 3 0 0 0 18 16 A 3 3 0 0 0 16.0625 16.712891L8.9453125 12.560547 A 3 3 0 0 0 9 12 A 3 3 0 0 0 8.9453125 11.439453L16.060547 7.2890625 A 3 3 0 0 0 18 8 A 3 3 0 0 0 21 5 A 3 3 0 0 0 18 2 z" />
</svg>
    </div>
</button>

align-l

<button class="button" align="icon" align-l="y">
    <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M18 2 A 3 3 0 0 0 15 5 A 3 3 0 0 0 15.054688 5.5605469L7.9394531 9.7109375 A 3 3 0 0 0 6 9 A 3 3 0 0 0 3 12 A 3 3 0 0 0 6 15 A 3 3 0 0 0 7.9355469 14.287109L15.054688 18.439453 A 3 3 0 0 0 15 19 A 3 3 0 0 0 18 22 A 3 3 0 0 0 21 19 A 3 3 0 0 0 18 16 A 3 3 0 0 0 16.0625 16.712891L8.9453125 12.560547 A 3 3 0 0 0 9 12 A 3 3 0 0 0 8.9453125 11.439453L16.060547 7.2890625 A 3 3 0 0 0 18 8 A 3 3 0 0 0 21 5 A 3 3 0 0 0 18 2 z" />
</svg>
    </div>
</button>

Example 5: Text-only Button

<button class="button">
    Exit
</button>

others Attributes

disabled: When present, it indicates that the button should be disabled.
align="icon": Aligns the button content to only display the icon.

Notes

Ensure to replace placeholder image URLs (/cancel.png, /mail.svg, /compose.svg) with the actual URLs for your icons.

Now you can easily integrate the Button component into your web application with the provided examples and customize it according to your design preferences.

Here's the documentation for customizing the Button component:

Theme

learn more variables
The Button component provides interactive elements for user interaction with customizable styles. Below are the variables you can customize to match your desired theme:

Variable	Description
`--padding`	Padding around the button content.
`--padding-cnt`	Additional padding around the button content.
`--border-radius`	Border radius of the button.
`--color-tertiary`	Text color of the button.
`--color-secondary`	Background color of the button.
`--font-size`	Font size of the button text.
`--transition-time`	Duration of transition effects.
`--ul-hover`	Background color on button hover (for desktop).
`--fill`	Fill color for button icons.

Example CSS Customization

.button {
    --padding: 10px;
    --padding-cnt: 20px;
    --border-radius: 5px;
    --color-tertiary: #ffffff;
    --color-secondary: #007bff;
    --font-size: 16px;
    --transition-time: 0.3s;
    --ul-hover: #f0f0f0;
    --fill: #ffffff; /* Adjust icon fill color */
}

Apply these CSS customizations to style the Button component according to your design preferences.

This documentation provides clear instructions on how to customize the Button component, along with an example CSS customization snippet. Adjustments can be made based on your specific design requirements.