Components
Button
A button with variants, sizes and a loading state.
A button with style variants, sizes, an icon and a loading state. Everything else is ordinary <button> attributes.
Variants
import { Button } from "@toimetdev/pathlogs-core";
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Delete</Button>
<Button variant="gradient">Gradient</Button>Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Loading
loading shows a spinner, disables the button and sets aria-busy. It is worth switching the caption to a continuous form while it runs — «Saving» rather than «Save»:
<Button variant="primary" loading={pending}>
{pending ? "Saving" : "Save"}
</Button>The spinner inherits the text colour, so it reads equally well on every variant — it needs no colour of its own.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | "gradient" | "secondary" | The styling. |
size | "sm" | "md" | "lg" | "md" | The size. |
loading | boolean | false | A spinner in place of the icon; the button is disabled. |
icon | ReactNode | — | An icon to the left of the caption. |
block | boolean | false | Fill the container's full width. |
… | ButtonHTMLAttributes | — | Everything else goes to <button>: onClick, disabled, form, aria-*. |
variant"primary" | "secondary" | "ghost" | "danger" | "gradient"defaults to: "secondary"
The styling.
size"sm" | "md" | "lg"defaults to: "md"
The size.
loadingbooleandefaults to: false
A spinner in place of the icon; the button is disabled.
iconReactNodeAn icon to the left of the caption.
blockbooleandefaults to: false
Fill the container's full width.
…ButtonHTMLAttributesEverything else goes to <button>: onClick, disabled, form, aria-*.
The component forwards ref — you can focus it programmatically or feed it into your own positioning logic.