Button

Storybook

Browse the props, controls and all the stories of Button in Storybook.

The Button component renders a styled button (btn btn-<variant> classes). It is used by the other components of the library (form builder, tables, modals...) and can be rendered as a button, a, input or div element. When disabled is set, the onClick handler is not called.

Usage

import { Button } from "@tsed/react-formio/molecules/button/Button";

<Button variant="primary" onClick={() => console.log("clicked")}>
  Save
</Button>;

Props

Button accepts all the native HTML attributes of the rendered element, plus:

Name	Type	Default	Description
tag	"button" | "a" | "input" | "div"	"button"	HTML element used to render the button.
variant	string		Variant applied as btn-<variant>. See BUTTON_VARIANTS for the built-in list (primary, outline-danger, link...).
disabled	boolean	false	Disables the button: adds the disabled class and ignores clicks.
onClick	(event) => void		Click handler, not called when the button is disabled.
className	string		Additional CSS classes.

The component forwards its ref to the rendered element.

Examples

Variants

All the variants exported by BUTTON_VARIANTS.

Live exampleOpen in Storybook ↗

Disabled

Live exampleOpen in Storybook ↗

With icon

Combine the button with the Icon atom:

import { Icon } from "@tsed/react-formio/atoms/icon/Icon";
import { Button } from "@tsed/react-formio/molecules/button/Button";

<Button variant="primary">
  <Icon name="save" />
  Save
</Button>;

Live exampleOpen in Storybook ↗

Override

Button is registered in the components registry under the name Button. See Registering react components.

import { registerComponent } from "@tsed/react-formio/registries/components";

registerComponent("Button", MyCustomButton);