Button
A tactile action button with variants for primary, secondary, utility, and icon-only controls.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-buttonHow to use
import { BjorkButton } from "@/components/bjork-ui/primitives";export function Demo() { return ( <BjorkButton variant="accent" size="md"> Publish </BjorkButton> );}
Props
variantdefault | secondary | outline | ghost | quiet | accent | raisedControls the surface weight. Accent and raised use the layered border and gradient treatment.
sizesm | md | lg | iconMatches the compact 45px control height by default.
disabledbooleanRemoves pointer interaction and drops opacity without changing the layout footprint.
hapticsbooleanEnables the WebHaptics tap pulse. Defaults on; pass haptics={false} to silence a button.
hapticPatternlight | medium | selection | custom patternChanges the WebHaptics preset or pattern used on pointer down. Defaults to light.
childrenReactNodeAccepts text, lucide icons, or both. Icons are normalized to the primitive sizing token.
Default action
Use for normal committed actions. It carries the same inset dark surface as the gallery controls.
<BjorkButton> <Plus aria-hidden="true" /> New board</BjorkButton>Secondary action
Use when the action should still feel solid, but not louder than the primary button.
<BjorkButton variant="secondary"> Review queue</BjorkButton>Outline action
Use for low-risk navigation or utility actions that need a visible boundary.
<BjorkButton variant="outline" size="lg"> <Download aria-hidden="true" /> Export</BjorkButton>Accent action
Use once per surface for the main final action. This carries the layered orange surface, inset edge, and rounded Bjork control shape.
<BjorkButton variant="accent"> <CrystalMark aria-hidden="true" /> Launch demo</BjorkButton>Raised action
Use as the paired secondary action when the control should keep the multi-border shell without taking the orange accent.
<BjorkButton variant="raised"> <DocsMark aria-hidden="true" /> Documentation</BjorkButton>Ghost action
Use for dismissal and secondary navigation when a visible shell would add noise.
<BjorkButton variant="ghost"> Dismiss</BjorkButton>Quiet action
Use for compact utility controls that should stay behind the main action stack.
<BjorkButton variant="quiet"> Medium</BjorkButton>Small action
Use small buttons in dense rows, tables, and supporting controls.
<BjorkButton size="sm"> Small</BjorkButton>Large action
Use large buttons when the control needs more weight without switching to accent.
<BjorkButton size="lg" variant="outline"> <Download aria-hidden="true" /> Export</BjorkButton>Icon action
Use with an accessible label when the icon is the only visible content.
<BjorkButton size="icon" variant="secondary" aria-label="Open settings"> <Settings2 aria-hidden="true" /></BjorkButton>Disabled action
Use disabled for unavailable work while preserving the button footprint.
<BjorkButton disabled> Sync unavailable</BjorkButton>