Toast

A toast component that displays title, content, and icons.

Usage

import Button from '@wedgekit/button';
import Toast from '@wedgekit/toast';

const Test = () => {
  const [toast, setToast] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setToast(true)}>Show Toast</Button>
      {toast && (
        <Toast
          header="This is the toast title"
          icon="warning"
          message="This is the toast content"
          remove={() => setToast(false)}
        />
      )}
    </div>
  );
};

render(<Test />);

Props

header

Type: string

Required: ✅

The header should summarize what the user needs to know; if necessary more details can be added in the message

remove

Type: () => void

Required: ✅

A callback fired when the toast's close button is clicked

crust

Type: boolean

Required: ❌

A boolean that specifies whether to display the toast's "crust" (spine-like bar)

domainColors

Type: { bg?: string, icon?: string, crust?: string }

Required: ❌

Defines the colors for various toast components. Despite the use of "domain" in the prop title, it doesn't actually take domains and instead takes color values (e.g. N500)

extraHeaderContent

Type: React.ReactNode

Required: ❌

A clunky prop which allows extra content to be rendered to the right of the header in a toast component.

icon

Type: string

Required: ❌

The name of the icon displayed on the toast (if not present the toast has no icon)

message

Type: string

Required: ❌

The toast message; should be used to provide further details to the user.