Button

A button launches the actions attached to it: searching, saving, confirming or opening a dialog. Below is the real button of the AWE React client. Change its attributes and the XML below follows; copy it into your screen.

Live preview

LightDark

Controls

Label

Button type

NormalSubmitReset

Look

Icon

∅No iconsavesearchtrashplusdownloadsendcheck

Size

DefaultSmallLarge

Icon only

Help tooltip

Disabled by a dependency

XML

<button id="demo" label="Save changes" button-type="submit" icon="save" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
label	Label	text
button-type	Button type	buttonsubmitreset
style	Look	btn-primarybtn-defaultbtn-dangerbtn-successbtn-warningbtn-darkbtn-ghostbtn-tonal
icon	Icon	savesearchtrashplusdownloadsendcheck
size	Size	smlg
style	Icon only	true / false
help	Help tooltip	text
dependency	Disabled by a dependency	true / false

Events and actions

Event	Description
click	Launched when the user clicks the button; it then runs its button actions.

Action (type)	What it does
filter	Reloads a grid or a chart with the current criteria.
confirm	Asks the user to confirm before the following actions run.
server	Calls a server action (maintain, query, service).
dialog	Opens a dialog.
restore	What a reset button launches when it has no actions: restores the criteria.

Full reference

• Full documentation of this component
• XSD reference of the element

Recipes

Common buttons, rendered by the same component. Server actions are simulated in these examples, so clicking does not call a server.

Main action of a form

A submit button with a primary style: it is the one that runs when the user presses Enter inside a criterion.

<button id="search" label="Search" button-type="submit" icon="search" style="btn-primary">
  <button-action type="filter" target="GrdUsrLst" />
</button>

Confirm before deleting

The confirm action stops the chain until the user accepts; the server action that follows only runs then.

<button id="del" label="Delete" icon="trash" style="btn-danger">
  <button-action type="confirm" target="DelMsg" />
  <button-action type="server" server-action="maintain" target-action="UsrDel" />
  <button-action type="filter" target="GrdUsrLst" />
</button>

Icon-only button

no-label draws only the icon. The label stays: it is the tooltip and the accessible name that screen readers announce.

<button id="help" label="Help" icon="question-circle" style="btn-ghost no-label">
  <button-action type="dialog" target="HlpOpt" />
</button>

Events and actions

The button has one event, click. Clicking it launches its button-action elements in order. See actions for every action type and dependencies to enable, disable or hide a button from the state of the screen.

Event	Description
click	Launched when an user clicks the button

More

• Full documentation of the button: attributes, types, styles and examples.
• XSD reference of the button element.