Buttons

🎨 Overview

Atomix provides eleven different button styles, each with its own design and purpose. Buttons can be created using either the <button> or <a> tags.

🔘 Creating a Button

To create a button, use either a <button> or <a> tag and apply the button class. By default, this will generate a standard button with no additional styling.

Example:

<button class="button">Default Button</button>

<a href="#" class="button">Default Link Button</a>

---

🎨 Button Colors

Atomix buttons are categorized into default styles and variant styles.

🌟 Default Buttons

These are the three main button styles:

Type	Class	Example
Default	button	button
Primary	button primary	button primary
Secondary	button secondary	button secondary
Tertiary	button tertiary	button tertiary

Example:

<button class="button primary">Primary Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button tertiary">Tertiary Button</button>

---

🎭 Variant Buttons

Atomix also provides additional button styles for specific use cases.

Type	Class	Example
Success	button success	button success
Danger	button danger	button danger
Warning	button warning	button warning
Info	button info	button info
Light	button light	button light
Dark	button dark	button dark
Denied	button denied	button denied

Example:

<button class="button success">Success</button>
<button class="button danger">Danger</button>
<button class="button warning">Warning</button>
<button class="button info">Info</button>
<button class="button light">Light</button>
<button class="button dark">Dark</button>
<button class="button denied">Denied</button>

---

🚀 Summary

• Use <button> or <a> with the button class.

• Choose from 3 main button styles: Primary, Secondary, Tertiary.

• Use additional variants like Success, Danger, Warning, etc. for different use cases.

• Buttons automatically adapt to their content.