2. Components
3. Button

Button

Buttons are the most common interactive element on a website, used to trigger actions, submit forms, or navigate users. Amazium provides simple, adaptable button styles to meet various design needs.

Usage

• Primary Actions – Highlight the most important action on a page.
• Secondary Actions – Offer additional actions with less emphasis.
• Disabled States – Indicate actions that are unavailable.

Default

The default button style is versatile and used in most cases where a primary action isn’t required.

<a href="#" class="btn">...</a>
<button class="btn">...</button>
<input class="btn" value="..." type="button">
<input class="btn" value="..." type="submit">
<input class="btn" disabled value="..." type="button">

Appearance

Buttons can convey different meanings using color-coded styles:

• Info (btn--info) – Represents general actions.
• Negative (btn--negative) – Indicates a destructive or cautionary action.
• Positive (btn--positive) – Suggests confirmation or success.
• Warning (btn--warning) – Highlights cautionary actions.

<a href="#" class="btn btn--info">...</a>

<a href="#" class="btn btn--negative">...</a>

<a href="#" class="btn btn--positive">...</a>

<a href="#" class="btn btn--warning">...</a>

Secondary / Ghost Buttons

Ghost buttons are used for less prominent actions, offering a subtle alternative to traditional buttons. Ghost buttons can change color on hover using these classes:

• .btn--hoverInfo
• .btn--hoverNegative
• .btn--hoverPositive
• .btn--hoverWarning

<a href="#" class="btn btn--ghost">...</a>

<a href="#" class="btn btn--ghost btn--hoverInfo">...</a>

<a href="#" class="btn btn--ghost btn--hoverNegative">...</a>

<a href="#" class="btn btn--ghost btn--hoverPositive">...</a>

<a href="#" class="btn btn--ghost btn--hoverWarning">...</a>

Button Sizes

Buttons are available in multiple sizes to fit different layouts and use cases.

<a href="#" class="btn btn--sm">...</a>

<a href="#" class="btn btn--md">...</a>

<a href="#" class="btn btn--lg">...</a>

Button Groups

Button groups allow you to visually and functionally group multiple buttons together as a single unit. This is useful for related actions such as navigation, toggles, or grouped controls.

Buttons inside a .btn-group are displayed inline with no spacing between them, creating a connected appearance.

<div class="btn-group">
  <a href="#" class="btn">...</a>
  <a href="#" class="btn">...</a>
</div>