Toast

Tokens are the building blocks of Blockle design system. They are used to define the visual style of components and are the foundation of the theming system.

import { ToastProvider, useToast } from '@blockle/blocks';

const App = () => {
  return (
    <ToastProvider>
      <ToastExample />
    </ToastProvider>
  );
};

const ToastExample = () => {
  const { addToast } = useToast();

  return (
    <button
      onClick={() =>
        addToast({
          {/* id: 'xx', optional when provided makes this message unique */}
          type: 'success', // variant?
          message: 'Hello World!',
          body: <Text>This is a toast message</Text>,
          duration: 5000, // optional, defaults to 5000
        })
      }
    >
      Add Toast
    </button>
  );
};

Example

Next Component theming