Play-button Component

The <play-button> component provides a clickable element, which can be used in forms or anywhere that needs simple, standard button functionality. It may display text, icons, or both. The <play-button> component can be customized with various attributes to achieve a specific look and functionality.

Basic Usage

Shape​

The shape property enables customization of the button's shape. By default, buttons have a rectangular shape with a small border radius. However, setting this property to "round" transforms the button into a rounded element.

Fill​

The fill property determines the background and border color of the button. By default, buttons have a solid background, unless they are placed within a toolbar, in which case they have a transparent background. This property allows for further customization by offering options such as 'outlined', 'plain', and 'text'.

Size​

The size property specifies the dimensions of the button, altering its height and padding accordingly. This feature provides flexibility in adapting the button's appearance to match the design requirements or visual hierarchy of the application.

Icon

The icon property allows the placement of an icon within the button, enhancing its visual representation. Additionally, the iconPosition property determines the position of the icon relative to the button text, offering options such as 'left', 'right', 'top', and 'bottom'.

Theming

Theming enables the customization of button colors based on the color scheme of the application. By setting the variant property, users can choose from a range of predefined variants including 'primary', 'secondary', 'info', 'success', 'warning', 'help', 'danger', 'contrast', and 'link'.

Events

The button supports all the applicable events, including the standard 'click' event.

Attributes

Attribute	Description
variant	Sets the variant of the button. Supported variants include secondary, primary, info, success, warning, help, danger, contrast, and link.
size	Sets the size of the button. Supported sizes include sm (small) and lg (large).
type	Sets the type of the button. Supported types include outlined, plain, and text.
disabled	Disables the button if set to true.
loading	Shows a loading spinner inside the button if set to true.
icon	Sets an icon to display on the button.
iconPosition	Sets the position of the icon relative to the button text. Supported positions include left, right, top, and bottom.
speedDial	Indicates whether the button is part of a speed dial component.
speedDialDirection	Sets the direction of the speed dial component. Supported directions include up, down, left, and 'right'.
shape	Sets the shape of the button. Supported shapes include circle, semi-circle, and quarter-circle.
splitButton	Indicates whether the button is a split button.