Feedback

Toast

Toaster mounts the toast stack once, near the root of your app. Call toast, toast.success, toast.error, toast.warning, or toast.info from the same module to show one. Pass a description for a second line and an action to add a button.

Complete todoFail to sync

import { Button } from "@manta-eu/react/button";
import { Toaster, toast } from "@manta-eu/react/toast";

const completeTodo = () => {
  toast.success("Todo completed", {
    description: "Launch the developer portal",
    action: { label: "Undo", onClick: () => toast("Todo reopened") },
  });
};

<Toaster />
<Button variant="tertiary" onClick={completeTodo}>Complete todo</Button>
<Button variant="tertiary" onClick={() => toast.error("Could not sync your todos")}>Fail to sync</Button>

Props · Storybook

Banner

Banner shows a message inline, in the page. Pick a type for its color. The compact size takes a linkText and linkHref. The loose size adds a description and an action button through actionLabel and onAction. Pass onClose to let the user dismiss it.

Two todos are due todayView

Your list is almost fullArchive finished todos to make room for new ones.

Archive

import { useState } from "react";
import { Banner } from "@manta-eu/react/banner";

const [archived, setArchived] = useState(false);

<Banner type="info" label="Two todos are due today" linkText="View" linkHref="#" />;
{
  archived ? (
    <Banner type="success" label="Finished todos archived" />
  ) : (
    <Banner
      type="warning"
      size="loose"
      label="Your list is almost full"
      description="Archive finished todos to make room for new ones."
      actionLabel="Archive"
      onAction={() => setArchived(true)}
    />
  );
}

Props · Storybook

Loader

Loader is a spinning icon. It takes the current text color and is 16px by default. Set its size with a className such as size-6.

Syncing todos

import { Loader } from "@manta-eu/react/loader";

<div className="flex items-center gap-2 text-muted-foreground">
  <Loader />
  <span className="typography-caption">Syncing todos</span>
</div>;

Props · Storybook

Skeleton

Skeleton is a shimmering placeholder for content that is still loading. Give it a width and height with a className.

import { Skeleton } from "@manta-eu/react/skeleton";

<div className="flex w-full max-w-sm flex-col gap-3">
  {[0, 1, 2].map((row) => (
    <div key={row} className="flex items-center gap-3">
      <Skeleton className="size-5" />
      <Skeleton className="h-4 flex-1" />
    </div>
  ))}
</div>;

Props · Storybook

Progress

Progress is a bar that fills to its value, from 0 to 100. Set size to sm or base, and isLoading to shimmer while the value is unknown. CircularProgress shows the same value as a ring, with a size of 14, 20, 24, or 28.

3 of 5 todos done

import { CircularProgress, Progress } from "@manta-eu/react/progress";

<Progress value={60} aria-label="3 of 5 todos done" />
<Progress size="sm" isLoading aria-label="Loading todos" />
<div className="flex items-center gap-2">
  <CircularProgress value={60} size={20} />
  <span className="typography-caption">3 of 5 todos done</span>
</div>

Props · Storybook

SteppedProgress

SteppedProgress shows how far the user is through a fixed number of steps. Pass currentStep and totalSteps. It reads “Step 1 of 4” unless you pass a label, and hideLabel hides the text.

Step 1 of 4

BackNext

import { useState } from "react";
import { Button } from "@manta-eu/react/button";
import { SteppedProgress } from "@manta-eu/react/stepped-progress";

const totalSteps = 4;
const [step, setStep] = useState(1);

<SteppedProgress currentStep={step} totalSteps={totalSteps} />
<Button variant="tertiary" size="sm" disabled={step <= 0} onClick={() => setStep(step - 1)}>Back</Button>
<Button size="sm" disabled={step >= totalSteps} onClick={() => setStep(step + 1)}>Next</Button>

Props · Storybook