athlon-button

Installation

ES imports

npm i @perplex-web-components/athlon-button

Import the registration of <athlon-button> via:

import '@perplex-digital/athlon-button';

Usage

Demo

view demo HTML/JS

view demo Angular

Primary button

<athlon-button>
    Basic button
</athlon-button>

Examples

<div
  style="display: flex; flex-direction: column; gap: 10px; margin-inline: 20px;"
>
  <h2>Default</h2>
  <athlon-button> Default button </athlon-button>

  <h2>Looks</h2>
  <athlon-button look="primary"> Primary button </athlon-button>
  <athlon-button look="secondary"> Secondary button </athlon-button>
  <athlon-button look="tertiary"> Tertiary button </athlon-button>
  <athlon-button look="conversion"> Conversion button </athlon-button>
  <athlon-button look="destructive"> Destructive button </athlon-button>
  <athlon-button look="light"> Light button </athlon-button>

  <h2>States</h2>
  <h3>Anchor with href</h3>
  <athlon-button look="primary" href="/testurl" target="_blank">
    Anchor button
  </athlon-button>

  <h3>Disabled</h3>
  <athlon-button look="secondary" disabled href="/testurl">
    Disabled button
  </athlon-button>
</div>