Block: Button

A Button block for configuring a button to be displayed in the user interface.
Tags:

Overview

A Button block is used for configuring a button that the user can click on. It can be configured to have text and/or an icon.

If the button is configured to have a routerLink, then clicking the button navigates the user to the specified routes.

Other blocks can also subscribe to a button in order to perform some action when the button is clicked. For example, a PopupOutlet can subscribe to a button in order to allow the popup to be opened.

In addition to the Button, it is also possible to create buttons inside a ControlPanel. These embedded buttons are not blocks, but behave similarly to Button blocks, and share the same configuration settings.

Example

Below is an example configuration.

kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: home-frame
    - frame: other-frame
frames:
  home-frame:
    kind: Frame
    contents:
      my-button:
        kind: Button
        text: A button
        color: danger
        routerLink: /other-frame
  other-frame:
    kind: Frame
    contents:
      my-text:
        kind: Text
        text: Hello World
        type: display-1

ButtonConfig

Name Type Required Description
kind "Button" Yes
routerLink string No
text string Yes
color ThemeColor No A constant that defines the theme colour to use for the button.
Possible options are primary, secondary, success, danger, warning, info, light, dark, and link. The default is primary.
href string No A string specifying a hyperlink. Clicking the hyperlink will navigate the browser to the link provided and away from the current solution. When no button colour is defined, the button background will have no colour, and the link text will have the primary colour.

ThemeColor

  • "primary"
  • "secondary"
  • "success"
  • "danger"
  • "warning"
  • "info"
  • "light"
  • "dark"