ComponentsLumos 0.0.1Open component
Button
A button or a link, in three styles, that knows which element it should be.
One component, two elements. A Button that goes somewhere renders an <a>; a Button that does something renders a <button>. That distinction matters more than it looks: it decides whether the keyboard activates it with Enter or Space, whether it can be opened in a new tab, and how a screen reader announces it.
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="link" element="link" href="/docs">Link</Button>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
variant | "primary" | "secondary" | "link" | "primary" | The style. primary is filled, secondary is outlined, link is text with an underline. |
element | "button" | "link" | "button" | Which element to render. Set link for anything that navigates. |
href | string | None | Where the link goes. Only with element="link". |
type | "button" | "submit" | "reset" | "button" | The button's type. Only with element="button". |
disabled | boolean | None | Disables the button. Only with element="button": a link cannot be disabled, and should be removed instead. |
Colors come from the theme
A button never sets its own colors. It reads --button-background, --button-text and their hover pairs from the nearest theme, so the same <Button> is correct on a light section, a dark one and a brand-colored one without a single extra class.
<Section theme="brand">
<Button>Readable here too</Button>
</Section>Writing the label
The text inside the button is what a screen reader announces and what a voice-control user says out loud. "Read the pricing" works; three buttons on one page all saying "Read more" do not.