Button

Use cases:

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

Example

Default ButtonPrimary Color ButtonSecondary Color ButtonButton with start slotButton with end slotDisabled Button

React

Declaration

<rapid-button>Button</rapid-button>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-button
        @click="${x => x.handleButtonClicked()}">
          Default Button
    </rapid-button>
    <rapid-button
          appearance="primary"
          @click="${x => x.handleButtonClicked()}">
      Primary Color Button
    </rapid-button>
    <rapid-button
          appearance="secondary"
          @click="${x => x.handleButtonClicked()}">
      Secondary Color Button
    </rapid-button>
    <rapid-button
        @click="${x => x.handleButtonClicked()}">
      <rapid-icon
        name="plus"
        slot="start">
      </rapid-icon>
      Button with start slot
    </rapid-button>
    <rapid-button
        @click="${x => x.handleButtonClicked()}">
      Button with end slot
      <rapid-icon
        name="warning"
        slot="end">
      </rapid-icon>
    </rapid-button>
    <rapid-button disabled>
      Disabled Button
    </rapid-button>
    `,
})
export class MyElement extends GenesisElement {
  handleButtonClicked() {
      alert('button clicked')
  }
}

Genesis

Declaration

<Button>Button</Button>

Usage

import { Button, Icon } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  const handleButtonClicked = (event) => {
    console.log('Button clicked')
  };

  return (
    <Button
        onClick={handleButtonClicked}>
        Default Button
    </Button>
    <Button
        onClick={handleButtonClicked}
        appearance="primary">
        Primary Color Button
    </Button>
    <Button
        onClick={handleButtonClicked}
        appearance="secondary">
        Secondary Color Button
    </Button>
    <Button>
        <Icon
            onClick={handleButtonClicked}
            name="plus"
            slot="start">
        </Icon>
        Button with start slot
    </Button>
    <Button>
        Button with end slot
        <Icon
            name="warning"
            slot="end">
        </Icon>
    </Button>
    <Button disabled>
        Disabled Button
    </Button>
  );
}

Angular

Declaration

<rapid-button>Button</rapid-button>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-button (click)="handleButtonClicked()">
          Default Button
    </rapid-button>
    <rapid-button
          appearance="primary"
          (click)="handleButtonClicked()">
      Primary Color Button
    </rapid-button>
    <rapid-button
          appearance="secondary"
          (click)="handleButtonClicked()">
      Secondary Color Button
    </rapid-button>
    <rapid-button (click)="handleButtonClicked()">
      <rapid-icon name="plus" slot="start"></rapid-icon>
      Button with start slot
    </rapid-button>
    <rapid-button (click)="handleButtonClicked()">
          Button with end slot
      <rapid-icon name="warning" slot="end"></rapid-icon>
    </rapid-button>
    <rapid-button disabled>
      Disabled Button
    </rapid-button>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  handleButtonClicked() {
    alert('button clicked')
  }
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Name	Type	Description	Example
autofocus	boolean	The boolean value of whether the button is checked.	<rapid-button autofocus>
disabled	boolean	Makes the component visually opaque, and configures it so that the user cannot alter the state via the web browser.	<rapid-button disabled>
form	string	Associates this component with a form. The Form id must be passed. If no Id is passed, then it will be associated with the ancestor form.	<rapid-button form="myForm">
name	string	Defines the name of the element.	<rapid-button name="buttonName">
type	string	Defines the mode of the button. button (default) - performs an action when clicked | reset - can influence a group of components associated with the same form)	<rapid-button type="button">
value	string	Defines the value associated with this button.	<rapid-button value="sample">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Use
start	Start slot.
end	End slot.

Parts

Part	Description
control	The button element.
content	The element wrapping button content.

Events fired

Event	Use
click	Emits a change event when the button is pressed

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML button element.