Button

The button element is an interactive component used to trigger actions or events. It supports various states (hover, active, disabled) and styles (primary, secondary, destructive) for customization and accessibility.

1. Button Primary

A primary HTML button is a key element on a webpage, designed to stand out and encourage user interaction. It typically represents the main action a user should take, such as submitting a form or saving changes.

1.1. Text Only

1.2. Text Only: Disabled

1.3. Text Only: Destructive

1.4. Text Only: Success

1.5. Icon and Text

1.6. Icon and Text: Disabled

1.7. Icon and Text: Destructive

1.8. Icon and Text: Success

1.9 Primary icon only

2. Button Secondary

A secondary HTML button is a supportive element on a webpage, designed to complement the primary button without overshadowing it. It usually represents less critical actions, such as navigating to another page or cancelling an action, providing users with alternative options.

2.1. Text Only

2.2. Text Only: Disabled

2.3. Text Only: Destructive

2.4. Icon and Text

2.5. Icon and Text: Disabled

2.6. Icon and Text: Destructive

2.7 Secondary icon only

3. Button Tertiary

A tertiary HTML button is a minimalistic element on a webpage, designed to be subtle and unobtrusive. With no border and a transparent background, it typically represents the least critical actions, such as linking to additional information or performing tertiary tasks, allowing it to blend seamlessly into the content.