Button

Description

The button comes in different variants:

  • Primary (Primary action to execute the current user flow)
  • Secondary (Alternative to the primary flow including cancel)
  • Tertiary (For rarely used options)

Primary Buttons




<button type="button" class="primary-button">Primary Button</button>
<button type="button" class="primary-button"><span class="font-symbols">arrow_back_ios</span>Primary Button with Icon</button>
<button type="button" class="primary-button">Primary Button with Icon<span class="font-symbols">arrow_forward_ios</span></button>
<button type="button" class="primary-button" disabled="">Disabled Primary Button</button>

Secondary Buttons




<button type="button" class="secondary-button">Secondary Button</button>
<button type="button" class="secondary-button"><span class="font-symbols">arrow_back_ios</span>Secondary Button with Icon</button>
<button type="button" class="secondary-button">Secondary Button with Icon<span class="font-symbols">arrow_forward_ios</span></button>
<button type="button" class="secondary-button" disabled="">Disabled Secondary Button</button>

Tertiary Buttons




<button type="button" class="tertiary-button">Tertiary Button</button>
<button type="button" class="tertiary-button"><span class="font-symbols">arrow_back_ios</span>Tertiary Button with Icon</button>
<button type="button" class="tertiary-button">Tertiary Button with Icon<span class="font-symbols">arrow_forward_ios</span></button>
<button type="button" class="tertiary-button" disabled="">Disabled Tertiary Button</button>

© 2024 nexineer digital GmbH. All rights reserved.