Button

Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.

Usage

API

Overview

Button supports four variants that change its visual style, each applied as an attribute:

Attribute	Description
`daff-button`	Rectangular button with background color
`daff-flat-button`	Rectangular button with no outline or background color
`daff-icon-button`	Icon only button used with icon fonts
`daff-stroked-button`	Rectangular button with outline, no background color

Native <button> or <a> elements should always be used in order to provide an easy, accessible experience for users.

Use <a> for navigation to new pages or different sections.
Use <button> for actions performed within the same page.

<button daff-button>Basic</button>
<button daff-stroked-button>Stroked</button>
<button daff-flat-button>Flat</button>
<button daff-icon-button>
	<fa-icon [icon]="faShoppingCart"></fa-icon>
</button>

Usage

Import the button type you need into your component:

Available imports:

DAFF_BASIC_BUTTON_COMPONENTS
DAFF_FLAT_BUTTON_COMPONENTS
DAFF_ICON_BUTTON_COMPONENTS
DAFF_STROKED_BUTTON_COMPONENTS
DAFF_BUTTON_COMPONENTS (all types)

import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_BASIC_BUTTON_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffButtonModule is deprecated. Use the standalone component imports instead.

Anatomy

A button is composed of a label with optional icons:

<button daff-button>
  <fa-icon daffPrefix></fa-icon>
  Add to cart
</button>

The label describing the action. Always provide one unless the button uses an icon that is universally understood and accessible.
Add the daffPrefix or daffSuffix directive to an icon to place it before or after the label text. Avoid using both at once.

Features

Icons

Render an icon on either side of the button label with the daffPrefix and daffSuffix directives.

<button daff-button>
  <fa-icon [icon]="faShoppingCart" daffPrefix></fa-icon>
  Add to cart
</button>

<button daff-button>
  Checkout
  <fa-icon [icon]="faArrowRight" daffSuffix></fa-icon>
</button>

Colors

Use the color property to change the color of a button.

Note: dark, light, and theme should be used on appropriate backgrounds for sufficient contrast.

<div class="button-colors__group">
	<button daff-button>Default</button>
	<button daff-button color="primary">Primary</button>
	<button daff-button color="secondary">Secondary</button>
	<button daff-button color="tertiary">Tertiary</button>
	<button daff-button color="dark">Dark</button>
	<button daff-button color="light">Light</button>
	<button daff-button color="theme">Theme</button>
	<button daff-button color="theme-contrast">Theme Contrast</button>
</div>

<div class="button-colors__group">
	<button daff-flat-button>Default</button>
	<button daff-flat-button color="primary">Primary</button>
	<button daff-flat-button color="secondary">Secondary</button>
	<button daff-flat-button color="tertiary">Tertiary</button>
	<button daff-flat-button color="dark">Dark</button>
	<button daff-flat-button color="light">Light</button>
	<button daff-flat-button color="theme">Theme</button>
	<button daff-flat-button color="theme-contrast">Theme Contrast</button>
</div>

<div class="button-colors__group">
	<button daff-stroked-button>Default</button>
	<button daff-stroked-button color="primary">Primary</button>
	<button daff-stroked-button color="secondary">Secondary</button>
	<button daff-stroked-button color="tertiary">Tertiary</button>
	<button daff-stroked-button color="dark">Dark</button>
	<button daff-stroked-button color="light">Light</button>
	<button daff-stroked-button color="theme">Theme</button>
	<button daff-stroked-button color="theme-contrast">Theme Contrast</button>
</div>

<div class="button-colors__group">
	<button daff-icon-button><fa-icon [icon]="faPlus"></fa-icon></button>
	<button daff-icon-button color="primary">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="secondary">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="tertiary">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="dark">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="light">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="theme">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
	<button daff-icon-button color="theme-contrast">
		<fa-icon [icon]="faPlus"></fa-icon>
	</button>
</div>

Elevation

Add shadows to buttons with the elevated property.

Note: The elevated property is not supported for flat, icon, and underline buttons.

<button daff-button elevated="true">Basic</button>
<button daff-stroked-button elevated="true">Stroked</button>

Sizes

Use the size property to control button dimensions. The default size is md.

<div class="button-sizes__group">
  <button daff-button size="sm">Small</button>
  <button daff-button size="md">Medium</button>
  <button daff-button size="lg">Large</button>
</div>

<div class="button-sizes__group">
  <button daff-stroked-button size="sm">Small</button>
  <button daff-stroked-button size="md">Medium</button>
  <button daff-stroked-button size="lg">Large</button>
</div>

<div class="button-sizes__group">
  <button daff-flat-button size="sm">Small</button>
  <button daff-flat-button size="md">Medium</button>
  <button daff-flat-button size="lg">Large</button>
</div>

<div class="button-sizes__group">
  <button daff-icon-button size="sm">
    <fa-icon [icon]="faPlus"></fa-icon>
  </button>
  <button daff-icon-button size="md">
    <fa-icon [icon]="faPlus"></fa-icon>
  </button>
  <button daff-icon-button size="lg">
    <fa-icon [icon]="faPlus"></fa-icon>
  </button>
</div>

Status indicators

Status indicators help users understand the type of action a button performs and its importance relative to other buttons in the same context. Use the status property to convey different semantic meanings.

<div class="statusable-button__group">
  <button daff-button status="warn">Warn</button>
  <button daff-button status="critical">Critical</button>
  <button daff-button status="success">Success</button>
</div>

<div class="statusable-button__group">
  <button daff-flat-button status="warn">Warn</button>
  <button daff-flat-button status="critical">Critical</button>
  <button daff-flat-button status="success">Success</button>
</div>

<div class="statusable-button__group">
  <button daff-stroked-button status="warn">Warn</button>
  <button daff-stroked-button status="critical">Critical</button>
  <button daff-stroked-button status="success">Success</button>
</div>

<div class="statusable-button__group">
  <button daff-icon-button status="warn">
    <fa-icon [icon]="faExclamation"></fa-icon>
  </button>
  <button daff-icon-button status="critical">
    <fa-icon [icon]="faExclamationTriangle"></fa-icon>
  </button>
  <button daff-icon-button status="success">
    <fa-icon [icon]="faCheckCircle"></fa-icon>
  </button>
</div>

Disabled

Use the disabled property to disable a button that shouldn't be actionable. The button will appear faded and won't respond to user interaction.

<button daff-button [disabled]="true">Button</button>
<button daff-flat-button [disabled]="true">Button</button>
<button daff-icon-button [disabled]="true">
  <fa-icon [icon]="faExclamation"></fa-icon>
</button>
<button daff-stroked-button [disabled]="true">Button</button>

Loading

Use the loading property to indicate that an action is being processed. When loading is set to true, the button displays a spinner.

<button daff-button [loading]="true">Button</button>
<button daff-flat-button [loading]="true">Button</button>
<button daff-stroked-button [loading]="true">Button</button>
<button daff-icon-button [loading]="true"></button>

Accessibility

Built-in behavior

Enforces the use of native <a> and <button> HTML elements for keyboard and screen reader support by default

Developer responsibilities

Use <a> for navigation to new pages or different sections
Use <button> for actions performed within the same page
Give icon only buttons (<daff-icon-button>) a meaningful label using aria-label or aria-labelledby

Deprecations

<daff-raised-button> is deprecated and will be removed in v1.0.0. Use the elevated property instead.
<daff-underline-button> is deprecated and will be removed in v1.0.0.