Skip to main content
Version: Previous

Web Components - Button

Button component enables users to trigger actions, such as submitting a form or opening a dialog.

Set-up

import { provideDesignSystem, alphaButton } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaButton());

Attributes

When you declare an <alpha-button>, you can define the following attributes:

NameTypeDescription
autofocusbooleanWhen true, the component will be focused when the page has finished loading
appearancestringCan be neutral, accent, lightweight, outline or stealth
disabledbooleanSimilar to readonly, but with a blur on the component
formstringAssociates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form
namestringDefine the name of the element
typestringDefines the mode of the button; can be button or reset; must be associated with a form (see below). Default: button
valuestringDefines the value associated with name

These attributes must be defined alongside the declaration of the component.

Types

The type attribute changes the button mode from reset and button.

  • button is the default mode of this component. It is a button that performs an action when clicked.
  • resetsets the mode of the button to reset and can influence a group of components associated with the same form.

The majority of components can be associated with a <form> using the attribute form with the id of the form. Below you see an example of this association, where a single form wraps up a text-field, number-field, text-area and button.

Form example
<form id="user_information">
<alpha-text-field value="name" form="user_information">Name</alpha-text-field>
<alpha-number-field value="20" form="user_information">Age</alpha-number-field>
<alpha-text-area value="Address" form="user_information">address</alpha-text-area>
<alpha-button type="reset" form="user_information">Reset information</alpha-button>
</form>
tip

In this case, you don't need to indicate the attribute form, since it wraps up all the components. Where this is not the case, you must use the form attribute.

In the example, if the button is pressed, all components will have their values reset to the default values accordingly.

Usage

All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

  • Example 1: a button with a natural appearance
Example 1
<alpha-button appearance="natural">Button</alpha-button>
  • Example 2: a disabled button with a type reset
Example 2
<alpha-button disabled type="reset">Button</alpha-button>

Trigger an action

When you place a button into your application, the user expects some action to be triggered. This is how you trigger an action in the application:

  1. Create a function functionName() into the class of the component:
export class TEMPLATE extends GenesisElement {
...
functionName(){
// Write an action here
}
...
}
  1. Use the event @click to call your function functionName():
...
<alpha-button @click=${x => x.functionName()}></alpha-button>
...
tip

You can also create functions with arguments (functionName(arg1: string)). In that case, don't forget to pass the arguments you defined; otherwise, it will throw a missing argument error

From this point, your application can run the action after the button has been clicked.

Try yourself

Live Editor
<alpha-button>Button</alpha-button>
Result
Loading...

Use cases

  • Submit forms
  • Trigger actions
  • Create interactive elements
  • Set options

Additional resources