AWE Button Component

The <awe-button> component is a versatile, customizable button element that can be used throughout your application for user interactions. It supports various styles, sizes, states, and can include icons in different positions.

Basic Usage

The most basic usage of the button component includes a label and a variant.

<awe-button variant="primary" label="Click me"></awe-button>

Sizes

The button component comes in three different sizes to accommodate various design needs.

Small Button

<awe-button variant="primary" size="small" label="Small Button"></awe-button>

Medium Button (Default)

<awe-button variant="primary" size="medium" label="Medium Button"></awe-button>

Large Button

<awe-button variant="primary" size="large" label="Large Button"></awe-button>

States

The button component supports different states to indicate its current condition.

Default State

<awe-button variant="primary" state="default" label="Default Button"></awe-button>

Active State

<awe-button variant="primary" state="active" label="Active Button"></awe-button>

Disabled State

<awe-button variant="primary" state="disabled" label="Disabled Button"></awe-button>

Danger State

<awe-button variant="primary" state="danger" label="Danger Button"></awe-button>

Warning State

<awe-button variant="primary" state="warning" label="Warning Button"></awe-button>

Icons

The button component can include icons in different positions.

Left Icon

<awe-button 
  variant="primary" 
  label="Button with Left Icon" 
  iconPosition="left" 
  iconName="home"
  iconColor="whiteIcon">
</awe-button>

Right Icon

<awe-button 
  variant="primary" 
  label="Button with Right Icon" 
  iconPosition="right" 
  iconName="arrow_forward"
  iconColor="whiteIcon">
</awe-button>

Icon Only

<awe-button 
  variant="primary" 
  iconPosition="only" 
  iconName="settings"
  iconColor="whiteIcon">
</awe-button>

Pill Button

The button can be styled with rounded corners for a pill-like appearance.

<awe-button variant="primary" label="Pill Button" pill="true"></awe-button>

Navigation

The button component can be used for navigation by providing a URL or route.

External URL

<awe-button 
  variant="primary" 
  label="Visit External Site" 
  url="https://example.com">
</awe-button>

Internal Route

<awe-button 
  variant="primary" 
  label="Go to Dashboard" 
  route="/dashboard">
</awe-button>

Events

The button component emits a userClick event when clicked, which can be handled in your component.

<awe-button 
  variant="primary" 
  label="Click Me" 
  (userClick)="handleButtonClick($event)">
</awe-button>

handleButtonClick(event: Event) {
  console.log('Button clicked', event);
  // Handle the button click
}

Accessibility

The button component is designed with accessibility in mind:

• It has proper keyboard navigation support (Enter and Space keys)
• It includes appropriate ARIA attributes
• It maintains focus states for keyboard users

API Reference

Inputs

Input	Type	Default	Description
label	string	''	The text displayed on the button
variant	'primary' | 'secondary'	'primary'	The visual style of the button
size	'small' | 'medium' | 'large'	'medium'	The size of the button
state	'default' | 'active' | 'disabled' | 'danger' | 'warning'	'default'	The state of the button
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether the button is in a loading state
iconPosition	'left' | 'right' | 'only'	'left'	The position of the icon relative to the label
iconColor	'action' | 'danger' | 'disable' | 'neutralIcon' | 'success' | 'warning' | 'whiteIcon' | ''	''	The color of the icon
pill	'true' | 'false'	'false'	Whether the button has rounded corners (pill-like)
url	string | undefined	undefined	External URL to navigate to when the button is clicked
route	string | undefined	undefined	Internal route to navigate to when the button is clicked
iconName	string	''	The name of the icon to display

Outputs

Output	Type	Description
userClick	EventEmitter<Event>	Emitted when the button is clicked

Customization

The button component can be customized using CSS variables to match your application's design system. Here are some examples of how you can customize the button:

/* Customize the primary button color */
awe-button.primary {
  --button-background-color: #ff5722;
  --button-text-color: #ffffff;
}

/* Customize the button border radius */
awe-button {
  --button-border-radius: 8px;
}

Best Practices

• Use the primary variant for the main action on a page
• Use the secondary variant for secondary actions
• Use the appropriate size based on the importance and visibility needed
• Include clear, concise labels that describe the action
• Use icons to enhance the button's meaning, not replace text (except for commonly understood icon-only buttons)
• Ensure sufficient color contrast for accessibility
• Group related buttons together for better user experience