Button ​

a button is a UI element that can be used to trigger actions, submit forms, or navigate between pages. It is a fundamental component in most web applications.

Purpose and Usage ​

The purpose of the button component is to provide users with a clear and intuitive way to interact with your application. Buttons can be used in a variety of contexts, such as:

• Submitting forms
• Triggering modals or popups
• Navigating between pages
• Triggering actions or processes

Best practices ​

When using the button component, it's important to follow these best practices:

• Use clear and concise labels that describe the action that will be taken when the button is clicked.
• Use contrasting colors and visual cues to make the button stand out and easy to find.
• Use the appropriate variant to emphasize or de-emphasize the action the button is representing.

variants ​

The button component comes in the following variations:

• filled: Used for primary actions or actions that require immediate attention like submitting a form.
• light: This variant is often used for secondary actions or actions that are less important than the primary actions.
• outline: has less priority and is often used to de-emphasize an action like a cancel` in a pop-up.
• text: Used for actions that require minimal attention.

color ​

the color prop provides several values, including primary, plain, success, and danger that can be used to convey specific meanings or match your branding.

disabled ​

disabled buttons are greyed out and do not emit onClick events.

loading ​

loading buttons have a loading spinner, they also do not emit onClick events while they are loading.

icons ​

icons can be added before or after the label text using iconPrepend and iconAppend slots, however do prefer using only one icon at a time for a more descriptive button.

buttons can also contain only icons with no text, this can be achieved by using iconOnly prop and providing an icon through any slot.

it's important to consider the context in which it will be used and to make sure that the icon is easily recognizable and meaningful to the user. Additionally, it's a good practice to provide some form of alternative text or tooltip that appears when the user hovers over the button, to ensure that users understand the purpose of the button and can use it effectively.

border radius ​

you can use borderRadius prop to change the border radius of the button, The appearance of more rounded buttons can convey different visual cues depending on the context and the overall design of the application or website.

the level of roundness can also affect the perceived seriousness of the button. For example, a button with a very high border radius that creates a circular shape may appear more playful and casual, while a button with a lower border radius that creates a slightly rounded rectangular shape may appear more serious and professional.

Props API ​

slots ​