Actions
Buttons, and text that the user edits in place.
Button
Button starts an action. Pick a variant for its weight and a size from xs to lg. Pass icon with
showLeftIcon or showRightIcon to add an icon, and isLoading to show a spinner while the action runs.
import { Plus } from "lucide-react";
import { Button } from "@manta-eu/react/button";
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost" icon={Plus} showLeftIcon>Add a todo</Button>
<Button variant="destructive">Delete</Button>
<Button variant="primary" isLoading>Saving</Button>EditableText
EditableText shows text that turns into an input when the user clicks it. It is controlled: pass value and
onChange.
import { useState } from "react";
import { EditableText } from "@manta-eu/react/editable-text";
const [title, setTitle] = useState("Launch the developer portal");
<EditableText value={title} onChange={setTitle} aria-label="Todo title" />;