Button

Stable

A clear next step. Native buttons with consistent sizes, purposeful variants and a visible keyboard focus.

StandaloneFour variantsThree sizes

Overview

Add avButton to a native button. Click to try it.

Ready when you are.

HTMLBasic usage

<button avButton type="button">Save changes</button>

Variants

Primary for the main action, secondary for alternatives, ghost for subtle actions and danger for destructive actions.

HTMLVariants

<button avButton>Primary</button>
<button avButton variant="secondary">Secondary</button>
<button avButton variant="ghost">Ghost</button>
<button avButton variant="danger">Danger</button>

Sizes

Use avSize to match your input height. Medium is the default.

sm 32 px

md 40 px

lg 48 px

Disabled

Native disabled buttons cannot be activated and are skipped during keyboard navigation.

Usage

Add AvButton to your component imports.

TYPESCRIPTComponent setup

import { AvButton } from 'avero-ui';

@Component({
  imports: [AvButton],
})

Explicit form actions. The default type is button. Use type="submit" to submit a form or type="reset" to reset it.

Make it your own. Customize --av-button-primary-background, --av-button-primary-hover, --av-button-radius and --av-button-focus.