Button

<afp-button>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A button component to trigger an action. Can also be used as a link.

Click me

<afp-button>Click me</afp-button>

<afp-button>Click me</afp-button>

<AfpButton>Click me</AfpButton>

<AfpButton>Click me</AfpButton>

Examples #

Variants #

Use the variant attribute to set the button's semantic variant.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-cluster">
  <afp-button variant="neutral">Neutral</afp-button>
  <afp-button variant="brand">Brand</afp-button>
  <afp-button variant="accent">Accent</afp-button>
  <afp-button variant="info">Info</afp-button>
  <afp-button variant="error">Error</afp-button>
  <afp-button variant="success">Success</afp-button>
  <afp-button variant="warning">Warning</afp-button>
</div>

<div class="afp-cluster">
  <afp-button [variant]="'neutral'">Neutral</afp-button>
  <afp-button [variant]="'brand'">Brand</afp-button>
  <afp-button [variant]="'accent'">Accent</afp-button>
  <afp-button [variant]="'info'">Info</afp-button>
  <afp-button [variant]="'error'">Error</afp-button>
  <afp-button [variant]="'success'">Success</afp-button>
  <afp-button [variant]="'warning'">Warning</afp-button>
</div>

<div class="afp-cluster">
  <AfpButton variant="neutral">Neutral</AfpButton>
  <AfpButton variant="brand">Brand</AfpButton>
  <AfpButton variant="accent">Accent</AfpButton>
  <AfpButton variant="info">Info</AfpButton>
  <AfpButton variant="error">Error</AfpButton>
  <AfpButton variant="success">Success</AfpButton>
  <AfpButton variant="warning">Warning</AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :variant="'neutral'">Neutral</AfpButton>
  <AfpButton :variant="'brand'">Brand</AfpButton>
  <AfpButton :variant="'accent'">Accent</AfpButton>
  <AfpButton :variant="'info'">Info</AfpButton>
  <AfpButton :variant="'error'">Error</AfpButton>
  <AfpButton :variant="'success'">Success</AfpButton>
  <AfpButton :variant="'warning'">Warning</AfpButton>
</div>

Appearance #

Use the appearance attribute to change the button's visual appearance.

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-button appearance="default" variant="neutral">Default</afp-button>
    <afp-button appearance="filled" variant="neutral">Filled</afp-button>
    <afp-button appearance="outlined" variant="neutral">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="neutral">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="neutral">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="brand">Default</afp-button>
    <afp-button appearance="filled" variant="brand">Filled</afp-button>
    <afp-button appearance="outlined" variant="brand">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="brand">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="brand">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="accent">Default</afp-button>
    <afp-button appearance="filled" variant="accent">Filled</afp-button>
    <afp-button appearance="outlined" variant="accent">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="accent">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="accent">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="info">Default</afp-button>
    <afp-button appearance="filled" variant="info">Filled</afp-button>
    <afp-button appearance="outlined" variant="info">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="info">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="info">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="error">Default</afp-button>
    <afp-button appearance="filled" variant="error">Filled</afp-button>
    <afp-button appearance="outlined" variant="error">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="error">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="error">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="success">Default</afp-button>
    <afp-button appearance="filled" variant="success">Filled</afp-button>
    <afp-button appearance="outlined" variant="success">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="success">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="success">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button appearance="default" variant="warning">Default</afp-button>
    <afp-button appearance="filled" variant="warning">Filled</afp-button>
    <afp-button appearance="outlined" variant="warning">Outlined</afp-button>
    <afp-button appearance="outlined-filled" variant="warning">Outlined filled</afp-button>
    <afp-button appearance="plain" variant="warning">Plain</afp-button>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'neutral'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'neutral'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'neutral'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'neutral'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'neutral'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'brand'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'brand'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'brand'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'brand'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'brand'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'accent'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'accent'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'accent'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'accent'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'accent'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'info'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'info'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'info'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'info'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'info'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'error'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'error'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'error'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'error'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'error'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'success'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'success'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'success'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'success'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'success'">Plain</afp-button>
  </div>
  <div class="afp-cluster">
    <afp-button [appearance]="'default'" [variant]="'warning'">Default</afp-button>
    <afp-button [appearance]="'filled'" [variant]="'warning'">Filled</afp-button>
    <afp-button [appearance]="'outlined'" [variant]="'warning'">Outlined</afp-button>
    <afp-button [appearance]="'outlined-filled'" [variant]="'warning'">Outlined filled</afp-button>
    <afp-button [appearance]="'plain'" [variant]="'warning'">Plain</afp-button>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="neutral">Default</AfpButton>
    <AfpButton appearance="filled" variant="neutral">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="neutral">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="neutral">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="neutral">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="brand">Default</AfpButton>
    <AfpButton appearance="filled" variant="brand">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="brand">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="brand">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="brand">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="accent">Default</AfpButton>
    <AfpButton appearance="filled" variant="accent">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="accent">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="accent">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="accent">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="info">Default</AfpButton>
    <AfpButton appearance="filled" variant="info">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="info">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="info">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="info">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="error">Default</AfpButton>
    <AfpButton appearance="filled" variant="error">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="error">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="error">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="error">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="success">Default</AfpButton>
    <AfpButton appearance="filled" variant="success">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="success">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="success">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="success">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton appearance="default" variant="warning">Default</AfpButton>
    <AfpButton appearance="filled" variant="warning">Filled</AfpButton>
    <AfpButton appearance="outlined" variant="warning">Outlined</AfpButton>
    <AfpButton appearance="outlined-filled" variant="warning">Outlined filled</AfpButton>
    <AfpButton appearance="plain" variant="warning">Plain</AfpButton>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'neutral'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'neutral'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'neutral'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'neutral'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'neutral'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'brand'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'brand'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'brand'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'brand'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'brand'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'accent'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'accent'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'accent'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'accent'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'accent'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'info'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'info'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'info'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'info'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'info'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'error'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'error'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'error'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'error'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'error'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'success'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'success'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'success'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'success'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'success'">Plain</AfpButton>
  </div>
  <div class="afp-cluster">
    <AfpButton :appearance="'default'" :variant="'warning'">Default</AfpButton>
    <AfpButton :appearance="'filled'" :variant="'warning'">Filled</AfpButton>
    <AfpButton :appearance="'outlined'" :variant="'warning'">Outlined</AfpButton>
    <AfpButton :appearance="'outlined-filled'" :variant="'warning'">Outlined filled</AfpButton>
    <AfpButton :appearance="'plain'" :variant="'warning'">Plain</AfpButton>
  </div>
</div>

Shapes #

Use the shape attribute to change a button's shape.

Pill

Rounded

Soft

Square

<div class="afp-cluster afp-align-center">
  <afp-button shape="pill">Pill</afp-button>
  <afp-button shape="rounded">Rounded</afp-button>
  <afp-button shape="soft">Soft</afp-button>
  <afp-button shape="square">Square</afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <afp-button [shape]="'pill'">Pill</afp-button>
  <afp-button [shape]="'rounded'">Rounded</afp-button>
  <afp-button [shape]="'soft'">Soft</afp-button>
  <afp-button [shape]="'square'">Square</afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton shape="pill">Pill</AfpButton>
  <AfpButton shape="rounded">Rounded</AfpButton>
  <AfpButton shape="soft">Soft</AfpButton>
  <AfpButton shape="square">Square</AfpButton>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton :shape="'pill'">Pill</AfpButton>
  <AfpButton :shape="'rounded'">Rounded</AfpButton>
  <AfpButton :shape="'soft'">Soft</AfpButton>
  <AfpButton :shape="'square'">Square</AfpButton>
</div>

Sizes #

Use the size attribute to change a button's size.

Small

Medium

Large

<div class="afp-cluster afp-align-center">
  <afp-button size="small">Small</afp-button>
  <afp-button size="medium">Medium</afp-button>
  <afp-button size="large">Large</afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <afp-button [size]="'small'">Small</afp-button>
  <afp-button [size]="'medium'">Medium</afp-button>
  <afp-button [size]="'large'">Large</afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton size="small">Small</AfpButton>
  <AfpButton size="medium">Medium</AfpButton>
  <AfpButton size="large">Large</AfpButton>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton :size="'small'">Small</AfpButton>
  <AfpButton :size="'medium'">Medium</AfpButton>
  <AfpButton :size="'large'">Large</AfpButton>
</div>

Caret #

Use the caret attribute to add a caret icon to the end of the button.

Caret

<afp-button caret>Caret</afp-button>

<afp-button caret>Caret</afp-button>

<AfpButton caret>Caret</AfpButton>

<AfpButton caret>Caret</AfpButton>

Link Buttons #

It's often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood.

Link

New Window

Download

<div class="afp-cluster">
  <afp-button href="https://example.com/">Link</afp-button>
  <afp-button href="https://example.com/" target="_blank">New Window</afp-button>
  <afp-button href="/assets/img/logo.svg" download="logo.svg">Download</afp-button>
</div>

<div class="afp-cluster">
  <afp-button [href]="'https://example.com/'">Link</afp-button>
  <afp-button [href]="'https://example.com/'" [target]="'_blank'">New Window</afp-button>
  <afp-button [href]="'/assets/img/logo.svg'" [download]="'logo.svg'">Download</afp-button>
</div>

<div class="afp-cluster">
  <AfpButton href="https://example.com/">Link</AfpButton>
  <AfpButton href="https://example.com/" target="_blank">New Window</AfpButton>
  <AfpButton href="/assets/img/logo.svg" download="logo.svg">Download</AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :href="'https://example.com/'">Link</AfpButton>
  <AfpButton :href="'https://example.com/'" :target="'_blank'">New Window</AfpButton>
  <AfpButton :href="'/assets/img/logo.svg'" :download="'logo.svg'">Download</AfpButton>
</div>

Icon Buttons #

Use the <afp-icon> component inside a button to create an icon button. You can use the aria-label attribute to provide an accessible label for screen readers.

<div class="afp-cluster">
  <afp-button appearance="default" variant="neutral"><afp-icon name="person-fill"></afp-icon></afp-button>
  <afp-button appearance="filled" variant="neutral"><afp-icon name="person-fill"></afp-icon></afp-button>
  <afp-button appearance="outlined" variant="neutral"><afp-icon name="person-fill"></afp-icon></afp-button>
  <afp-button appearance="outlined-filled" variant="neutral"><afp-icon name="person-fill"></afp-icon></afp-button>
  <afp-button appearance="plain" variant="neutral"><afp-icon name="person-fill"></afp-icon></afp-button>
</div>

<div class="afp-cluster">
  <afp-button [appearance]="'default'" [variant]="'neutral'"><afp-icon [name]="'person-fill'"></afp-icon></afp-button>
  <afp-button [appearance]="'filled'" [variant]="'neutral'"><afp-icon [name]="'person-fill'"></afp-icon></afp-button>
  <afp-button [appearance]="'outlined'" [variant]="'neutral'"><afp-icon [name]="'person-fill'"></afp-icon></afp-button>
  <afp-button [appearance]="'outlined-filled'" [variant]="'neutral'"><afp-icon [name]="'person-fill'"></afp-icon></afp-button>
  <afp-button [appearance]="'plain'" [variant]="'neutral'"><afp-icon [name]="'person-fill'"></afp-icon></afp-button>
</div>

<div class="afp-cluster">
  <AfpButton appearance="default" variant="neutral"><AfpIcon name="person-fill"></AfpIcon></AfpButton>
  <AfpButton appearance="filled" variant="neutral"><AfpIcon name="person-fill"></AfpIcon></AfpButton>
  <AfpButton appearance="outlined" variant="neutral"><AfpIcon name="person-fill"></AfpIcon></AfpButton>
  <AfpButton appearance="outlined-filled" variant="neutral"><AfpIcon name="person-fill"></AfpIcon></AfpButton>
  <AfpButton appearance="plain" variant="neutral"><AfpIcon name="person-fill"></AfpIcon></AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :appearance="'default'" :variant="'neutral'"><AfpIcon :name="'person-fill'"></AfpIcon></AfpButton>
  <AfpButton :appearance="'filled'" :variant="'neutral'"><AfpIcon :name="'person-fill'"></AfpIcon></AfpButton>
  <AfpButton :appearance="'outlined'" :variant="'neutral'"><AfpIcon :name="'person-fill'"></AfpIcon></AfpButton>
  <AfpButton :appearance="'outlined-filled'" :variant="'neutral'"><AfpIcon :name="'person-fill'"></AfpIcon></AfpButton>
  <AfpButton :appearance="'plain'" :variant="'neutral'"><AfpIcon :name="'person-fill'"></AfpIcon></AfpButton>
</div>

Decorations #

Use the default slots to add custom decorations to the start or end of a button.

John Doe

<div class="afp-cluster">
  <afp-button appearance="filled" variant="neutral" caret>
    <afp-avatar size="small" shape="pill" image="https://picsum.photos/100" style="--afp-avatar-border-width: 0"></afp-avatar> 
    John Doe
  </afp-button>
</div>

<div class="afp-cluster">
  <afp-button [appearance]="'filled'" [variant]="'neutral'" caret>
    <afp-avatar [size]="'small'" [shape]="'pill'" [image]="'https://picsum.photos/100'" [style]="'--afp-avatar-border-width: 0'"></afp-avatar> 
    John Doe
  </afp-button>
</div>

<div class="afp-cluster">
  <AfpButton appearance="filled" variant="neutral" caret>
    <AfpAvatar size="small" shape="pill" image="https://picsum.photos/100" style="--afp-avatar-border-width: 0"></AfpAvatar> 
    John Doe
  </AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :appearance="'filled'" :variant="'neutral'" caret>
    <AfpAvatar :size="'small'" :shape="'pill'" :image="'https://picsum.photos/100'" :style="'--afp-avatar-border-width: 0'"></AfpAvatar> 
    John Doe
  </AfpButton>
</div>

Disabled #

Use the disabled attribute to disable a button.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-cluster">
  <afp-button variant="neutral" disabled>Neutral</afp-button>
  <afp-button variant="brand" disabled>Brand</afp-button>
  <afp-button variant="accent" disabled>Accent</afp-button>
  <afp-button variant="info" disabled>Info</afp-button>
  <afp-button variant="error" disabled>Error</afp-button>
  <afp-button variant="success" disabled>Success</afp-button>
  <afp-button variant="warning" disabled>Warning</afp-button>
</div>

<div class="afp-cluster">
  <afp-button [variant]="'neutral'" disabled>Neutral</afp-button>
  <afp-button [variant]="'brand'" disabled>Brand</afp-button>
  <afp-button [variant]="'accent'" disabled>Accent</afp-button>
  <afp-button [variant]="'info'" disabled>Info</afp-button>
  <afp-button [variant]="'error'" disabled>Error</afp-button>
  <afp-button [variant]="'success'" disabled>Success</afp-button>
  <afp-button [variant]="'warning'" disabled>Warning</afp-button>
</div>

<div class="afp-cluster">
  <AfpButton variant="neutral" disabled>Neutral</AfpButton>
  <AfpButton variant="brand" disabled>Brand</AfpButton>
  <AfpButton variant="accent" disabled>Accent</AfpButton>
  <AfpButton variant="info" disabled>Info</AfpButton>
  <AfpButton variant="error" disabled>Error</AfpButton>
  <AfpButton variant="success" disabled>Success</AfpButton>
  <AfpButton variant="warning" disabled>Warning</AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :variant="'neutral'" disabled>Neutral</AfpButton>
  <AfpButton :variant="'brand'" disabled>Brand</AfpButton>
  <AfpButton :variant="'accent'" disabled>Accent</AfpButton>
  <AfpButton :variant="'info'" disabled>Info</AfpButton>
  <AfpButton :variant="'error'" disabled>Error</AfpButton>
  <AfpButton :variant="'success'" disabled>Success</AfpButton>
  <AfpButton :variant="'warning'" disabled>Warning</AfpButton>
</div>

Loading #

Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.

Load

<div class="afp-cluster">
  <afp-button variant="neutral" loading>Load</afp-button>
  <afp-button variant="brand" loading>Load</afp-button>
  <afp-button variant="accent" loading>Load</afp-button>
  <afp-button variant="info" loading>Load</afp-button>
  <afp-button variant="error" loading>Load</afp-button>
  <afp-button variant="success" loading>Load</afp-button>
  <afp-button variant="warning" loading>Load</afp-button>
</div>

<div class="afp-cluster">
  <afp-button [variant]="'neutral'" loading>Load</afp-button>
  <afp-button [variant]="'brand'" loading>Load</afp-button>
  <afp-button [variant]="'accent'" loading>Load</afp-button>
  <afp-button [variant]="'info'" loading>Load</afp-button>
  <afp-button [variant]="'error'" loading>Load</afp-button>
  <afp-button [variant]="'success'" loading>Load</afp-button>
  <afp-button [variant]="'warning'" loading>Load</afp-button>
</div>

<div class="afp-cluster">
  <AfpButton variant="neutral" loading>Load</AfpButton>
  <AfpButton variant="brand" loading>Load</AfpButton>
  <AfpButton variant="accent" loading>Load</AfpButton>
  <AfpButton variant="info" loading>Load</AfpButton>
  <AfpButton variant="error" loading>Load</AfpButton>
  <AfpButton variant="success" loading>Load</AfpButton>
  <AfpButton variant="warning" loading>Load</AfpButton>
</div>

<div class="afp-cluster">
  <AfpButton :variant="'neutral'" loading>Load</AfpButton>
  <AfpButton :variant="'brand'" loading>Load</AfpButton>
  <AfpButton :variant="'accent'" loading>Load</AfpButton>
  <AfpButton :variant="'info'" loading>Load</AfpButton>
  <AfpButton :variant="'error'" loading>Load</AfpButton>
  <AfpButton :variant="'success'" loading>Load</AfpButton>
  <AfpButton :variant="'warning'" loading>Load</AfpButton>
</div>

Properties

Learn more about properties.

Name Description Reflects

variant

variant of button

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

type

button type

Type

AfpButtonType

Name	Description
`BUTTON`	Standard button.
`SUBMIT`	Submits a form.
`RESET`	Resets all fields in a form.
`LINK`	Navigates to another resource.

AfpButtonType

Default AfpButtonType.BUTTON

value

value which is displayed as button text

Type string

size

size of the button.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

title

html title attribute of button

Type string

appearance

appearance of button

Type

AfpAppearance

Name	Description
`DEFAULT`	Highlighted, primary action (default).
`OUTLINED`	Transparent background with a visible border.
`PLAIN`	Minimal, no border or background.
`FILLED`	Solid background, no border.
`OUTLINED_FILLED`	Solid background with a visible border.

AfpAppearance

Default AfpAppearance.DEFAULT

name

html name attribute of button

Type string

tabIndex
tabindex

html tabIndex property of button

Type number

Default 0

rel

When using `href`, this attribute will map to the underlying link's `rel` attribute.

Type string | undefined

disabled

disabled property of button

Type boolean

Default false

caret

enables caret icon

Type boolean

Default false

loading

enables loading style and disables button

Type boolean

Default false

shape

shape of the button

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

href

href for link button

Type string

target

target of link type button

Type AfpTarget

download

enables download option for type link with the specified filename

Type string

Dynamic Attributes

Dynamic Attributes reflect a component’s current state and change automatically in response to internal logic or user interaction.

They can be used for conditional styling in combination with CSS Attributes.

Name	Description
`icon`	Applied when the button contains only an icon in the default slot.

Methods

Learn more about using methods.

Name	Description	Arguments
`doClick`	This method retrieves the associated action element and simulates a user click on it. It can be used to trigger interactive behavior without requiring direct user interaction.	-
`doFocus`	This method retrieves the associated action element and sets focus on it. It can be used to programmatically move the focus to the element without user interaction.	-
`doBlur`	This method retrieves the associated action element and removes focus from it. It can be used to programmatically blur the element without user interaction.	-

Events

Learn more about events.

Name	Return	Description
`afp-click`	`void`	Emitted when the button is clicked.
`afp-focus`	`void`	Emitted when the button gains focus.
`afp-blur`	`void`	Emitted when the button loses focus.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`spinner`	Used to pass in a custom spinner.
`caret-icon`	Used to pass in a custom caret icon.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`button`	The button element when the component is rendered as a button.	`::part(button)`
`link`	The link element when the component is rendered as a link.	`::part(link)`
`reset`	The element representing a reset action when `type="reset"`.	`::part(reset)`
`submit`	The element representing a submit action when `type="submit"`.	`::part(submit)`
`label`	The container wrapping the button’s label and default slot content.	`::part(label)`
`spinner`	The container for the loading spinner, visible when loading is true.	`::part(spinner)`
`caret`	The container for the caret icon, visible when caret is true.	`::part(caret)`

CSS Custom Properties

Name	Description	Default
`--afp-button-disabled-opacity`	The opacity of the button when disabled.	`0.5`
`--afp-button-width`	The width of a button.	`auto`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

afp-spinner

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/button/button.js';