Tabler React 2 Docs

Modals

Note: The Modal component is a simple component that provides very few creature comforts. You can use the hook-driven modal component instead if you don't want or need to manage your own state.

Note: For extremely simple confirm modals, you can use the ConfirmModal component.

Modals are used to display content in a layer above the main content. They can be used to display forms, confirmations, or other types of content.

Signature

import { Modal } from "tabler-react-2";

<Modal {...props}>{children}</Modal>;

Props

Prop	Required	Type	Description
`open`	Yes	Boolean	Whether the modal is open.
`onClose`	Yes	Function	A function that fires when the user closes the modal.
`title`	No	String	The title of the modal.
`status`	No	`Color`	The color variant of the modal.
`buttons`	No	`ButtonList`	A list of buttons to display in the modal footer.

Basic Usage

The Modal component is used to display a modal.

<Modal open={true} title="Modal Title">
  <p>A basic modal.</p>
</Modal>

Status

You can pass in a status prop to the Modal component to change the color of the border top modal. The status prop accepts a string value of any color.

<Modal
  open={true} title="Modal Title"
  status="danger"
>
  <p>A danger modal.</p>
</Modal>
<Modal
  open={true} title="Modal Title"
  status="success"
>
  <p>A danger modal.</p>
</Modal>
<Modal
  open={true} title="Modal Title"
  status="purple"
>
  <p>A danger modal.</p>
</Modal>

Buttons

You can pass ButtonList to the buttons prop to display buttons in the modal footer.

<Modal
  open={true}
  onClose={() => alert("Closed!")}
  title="Modal Title"
  buttons={[
    {
      text: "Button 1",
      variant: "danger",
      onClick: () => alert("Clicked"),
    },
    {
      text: "Button 2",
      variant: "success",
      onClick: () => alert("Clicked"),
    },
  ]}
>
  <p>A modal with buttons.</p>
</Modal>

ButtonList

The buttons prop of the Modal component accepts an array of objects.

A button object has the following properties:

Prop	Required	Type	Description
`text`	Yes	String	The text to display in the button.
`variant`	No	`Color`	The color variant of the button.
`onClick`	Yes	Func	A function to call when the button is clicked.

type ButtonList = Array<{
  text: string;
  variant?: string;
  onClick: () => void;
}

Custom content

<Modal open={true} title="Modal Title">
  <kbd>A modal with custom content.</kbd>
</Modal>

Edit this page on GitHub

Tabler React 2 Docs

Modals

Modals

Signature

Props

Basic Usage

Status

Buttons

ButtonList

Custom content

Badges

Hook-driven modals

On this page