Efniv0.1

Components

Button

A dense action target with six variants and four sizes. Icons placed inside are auto-spaced.

When to useto trigger an action or submit a form — the clickable commitment on a screen.

Import

import { Button } from "@ravnhq/efni/button"

Variants

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

Sizes

<Button size="xs">xs</Button>
<Button size="sm">sm</Button>
<Button>default</Button>
<Button size="lg">lg</Button>

With icons

<Button>
  <Icon icon={Plus} />
  New mission
</Button>

<Button variant="outline">
  Continue
  <Icon icon={ArrowRight} />
</Button>

Icon only

<Button size="icon" variant="outline" aria-label="Add">
  <Icon icon={Plus} />
</Button>

Do & don't

Use one primary button for the main action and make the rest quieter.

Don't compete two primary buttons against each other.

Accessibility

KeyAction
Enter / SpaceActivate the button.
TabMove focus to and from the button.
  • Renders a native <button> — semantics and focus come for free.
  • Give icon-only buttons an aria-label; avoid disabling unless necessary.
  • Meets WCAG 2.5.8 (AA, 24×24 min) at every size; default and up meet 36×36+ for comfortable pointer targets.

Guidelines

Do
  • Use exactly one primary button per view for the main action.
  • Lead the label with a verb — Save changes, not OK.
  • Drop to ghost or link for low-emphasis actions inside dense UIs.
  • For button-styled Links, apply buttonVariants() className to the <Link>.
Don't
  • Don't place two primary buttons side by side.
  • Don't use the destructive variant for reversible actions.
  • Don't pad a label with more than one icon.
  • Don't wrap a Link in <Button render={<Link/>}> — it triggers the Base UI nativeButton warning.

Props

PropTypeDefaultDescription
variant"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""default"Visual style of the button.
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"Height and padding. Icon variants are square.
renderReact.ReactElement | ComponentRenderFn<RenderFunctionProps, State>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
…propsButtonPrimitive.Props—Everything Button passes to the element it renders.