Button

<Button /> Component

The Button component renders a HTML <button /> element. It supports various states and styles, including loading indicators, icons, and secondary styling. This component also integrates with tooltips to provide additional help text. The Button manages its own internal state to determine if it should be disabled or if certain elements like icons should be displayed. It also supports various button types and sizes, and can handle click events and setup actions.

Usage

<Button @type="primary" @text="Click Me" @onClick={{this.doSomething}} @helpText="This button does something..." />

Events

The button has two built in events, but also supports all HTML <button /> events through the use of the {{on}} modifier.

Event	Description
onInsert	Fired when the Button is rendered and inserted into view. Example Usage <Button @text="Click Me" @onInsert={{this.doSomething}} />
onClick	Fired when a user clicks the button. Example Usage <Button @text="Click Me" @onClick={{this.doSomething}} /> <Button @text="Click Me" {{on "hover" this.doSomething}} />

Properties

Property	Type	Description
isLoading	Boolean	Indicates whether the button is in a loading state. If true, shows a spinner and disables interactions.
disabled	Boolean	Determines if the button should be disabled. If true, the button is not clickable.
type	String	Specifies the button type. Defaults to 'default'. If set to 'secondary', the button has secondary styling.
icon	String	The icon to display within the button, shown if isLoading is false.
iconPrefix	String	The prefix for the icon, useful for specifying icon sets.
iconSize	Number	The size of the icon.
iconRotation	String	Rotation angle for the icon.
iconFlip	String	Flip orientation for the icon.
iconSpin	Boolean	Whether the icon should spin.
text	String	The text to display inside the button.
textClass	String	CSS class to apply to the text element within the button.
helpText	String	Text to display in a tooltip when hovering over the button.
exampleText	String	Example text to display alongside helpText in the tooltip.
tooltipPlacement	String	Placement of the tooltip relative to the button.
wrapperClass	String	Additional CSS class for the button wrapper.
outline	Boolean	If true, the button uses an outline style.
size	String	Size of the button. Defaults to 'sm' if not specified.
buttonType	String	The type attribute for the button element, defaults to "button".
responsive	Boolean	If true, hides the text on smaller screens.

Types

Type	Description
secondary	Styling for a secondary interaction.
primary	Styling for a primary interaction.
success	Styling for a successful interaction.
warning	Styling for a warning interaction.
danger	Styling for a dangerous interaction.
magic	Styling for a "magical" interaction.
black	Styling for a dark styled button.
transparent	Styling for a transparent styled button.
link	Styling to render the button as a link (no margin, padding, borders, shadow, or background).