Button

Introduction

Buttons trigger actions when clicked.

Examples

duplicateAnchor Button

Usage

Adding icons

Button and AnchorButton support icon and rightIcon props to place an icon on either end of their children. Icons can also be supplied as children using the

Icon component
.

AnchorButton is used as a link.

Button is used to trigger different actions.

import React from "react";
import { Button } from "@commure/components-foundation";
function MyButton() {
return (
<Button icon="refresh">Refresh</Button>
);
}
export default MyButton;
// renders as:
<button class="bp3-button" type="button"><svg class="bp3-icon">...</svg>Refresh</button>
warning-signDisabling a button prevents all interaction

Use AnchorButton for interaction events (such as hovering) on a disabled button.

Button uses the native disabled attribute on the <button> tag so the browser disables all interactions. AnchorButton uses the class .bp3-disabled because <a> tags do not support the disabled attribute. As a result, the AnchorButton component will prevent only the onClick handler when disabled but permit other events.

API Reference

AnchorButton

Prop NameRequired?TypeDescription
activefalsebooleanIf set to `true`, the button will display in an active state. This is equivalent to setting `className={Classes.ACTIVE}`.
alignTextfalseAlignmentText alignment within button. By default, icons and text will be centered within the button. Passing `"left"` or `"right"` will align the button text to that side and push `icon` and `rightIcon` to either edge. Passing `"center"` will center the text and icons together.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether this action is non-interactive.
elementReffalse(ref: HTMLElement | null) => anyA ref handler that receives the native HTML element backing this component.
fillfalsebooleanWhether this button should expand to fill its container.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the text.
intentfalseIntentVisual intent color to apply to element.
largefalsebooleanWhether this button should use large styles.
loadingfalsebooleanIf set to `true`, the button will display a centered loading spinner instead of its contents. The width of the button is not affected by the value of this prop.
minimalfalsebooleanWhether this button should use minimal styles.
onClickfalse(event: MouseEvent<HTMLElement>) => voidClick event handler.
rightIconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render after the text.
smallfalsebooleanWhether this button should use small styles.
textfalseReact.ReactNodeAction text. Can be any single React renderable.
typefalsestringHTML `type` attribute of button. Common values are `"button"` and `"submit"`. Note that this prop has no effect on `AnchorButton`; it only affects `Button`.

Button

Prop NameRequired?TypeDescription
activefalsebooleanIf set to `true`, the button will display in an active state. This is equivalent to setting `className={Classes.ACTIVE}`.
alignTextfalseAlignmentText alignment within button. By default, icons and text will be centered within the button. Passing `"left"` or `"right"` will align the button text to that side and push `icon` and `rightIcon` to either edge. Passing `"center"` will center the text and icons together.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether this action is non-interactive.
elementReffalse(ref: HTMLElement | null) => anyA ref handler that receives the native HTML element backing this component.
fillfalsebooleanWhether this button should expand to fill its container.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the text.
intentfalseIntentVisual intent color to apply to element.
largefalsebooleanWhether this button should use large styles.
loadingfalsebooleanIf set to `true`, the button will display a centered loading spinner instead of its contents. The width of the button is not affected by the value of this prop.
minimalfalsebooleanWhether this button should use minimal styles.
onClickfalse(event: MouseEvent<HTMLElement>) => voidClick event handler.
rightIconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render after the text.
smallfalsebooleanWhether this button should use small styles.
textfalseReact.ReactNodeAction text. Can be any single React renderable.
typefalsestringHTML `type` attribute of button. Common values are `"button"` and `"submit"`. Note that this prop has no effect on `AnchorButton`; it only affects `Button`.

Related Reading

Blueprint Reference
Design
Button Group
Icon