Button

Variants

Primary

The most important action on a page.

Save report

Save report

Save report

import { Button } from '@eekodigital/raster';

<Button>Save report</Button>
<Button size="sm">Save report</Button>
<Button size="lg">Save report</Button>

Secondary

Supporting or lower-priority actions.

Cancel

Cancel

<Button variant="secondary">Cancel</Button>
<Button variant="secondary" size="sm">Cancel</Button>

Danger

Destructive or irreversible actions.

Delete project

<Button variant="danger">Delete project</Button>

Disabled state

Save report

Cancel

<Button disabled>Save report</Button>
<Button variant="secondary" disabled>Cancel</Button>

Render prop

Why does this exist? An <a> inside a <button> is invalid HTML. Passing a render prop applies button styles to any element — typically a router Link — so the rendered HTML is a single <a>, not a button wrapping a link.

props => createVNode("a", { href: "#", ...props, children: "View project" })

// Navigates to a new page → use render prop + Link
<Button>
  {(props) => <Link to="/projects/new" {...props}>New project</Link>}
</Button>

// Submits a form → plain button
<Button type="submit">Create project</Button>

Props

Prop	Type	Default	Description
variant	’primary’ | ‘secondary’ | ‘danger'	'primary’	Visual style
size	’sm’ | ‘md’ | ‘lg'	'md’	Button size
children	ReactNode | (props) => ReactNode	—	Pass a render prop to apply button styles to a custom element instead of a <button>
…props	ButtonHTMLAttributes	—	All native button attributes