# Button

Bundle name: `"components/button"`

Implementation: [button.css](./button.css)

## Classes

### `button-icon-and-text`

Applies to the components: `button`, `a`

Used in combination with button variant classes (button-primary, button-secondary, button-tertiary) to create buttons that display both an icon and text. Creates a grid layout with appropriate spacing between the icon and text content

### `button-icon-only`

Applies to the components: `button`, `a`

Used in combination with button variant classes (button-primary, button-secondary, button-tertiary) to create icon-only buttons without text. Applies appropriate padding to ensure the button maintains proper dimensions with only an icon inside

### `button-primary`

Applies to the components: `button`, `a`

A primary button is a key element 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. Features a solid background color for maximum visual emphasis

### `button-primary-destructive`

Applies to the components: `button`, `a`

A variant of the primary button used for destructive actions (e.g., delete, remove). Uses destructive color styling to warn users about potentially dangerous operations

### `button-primary-success`

Applies to the components: `button`, `a`

A variant of the primary button used for success or confirmation actions. Uses success color styling to indicate positive operations

### `button-secondary`

Applies to the components: `button`, `a`

A secondary button is a supportive element 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

### `button-tertiary`

Applies to the components: `button`, `a`

A tertiary button is a minimalistic element 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. Note: designed without horizontal padding to prevent visual gaps when there's no border
