Button
Buttons trigger an action. The variant communicates how much attention that action deserves, so a person can find the one thing a screen wants them to do.
Added in v1.0.0 · import from "@borneo/react"
Interactive previewPermalink to this section
Every control below drives the production component. What you see is what the package renders.
<Button
variant="primary"
size="md"
shape="default"
depth="flat"
>
Create project
</Button>AnatomyPermalink to this section
Hover or focus a part to highlight it in the example.
VariantsPermalink to this section
Six levels of emphasis. A screen should contain exactly one primary button — if two actions both look primary, neither is.
Primary
The one action the screen wants
Secondary
Supporting actions
Soft
Brand-tinted, lower-emphasis action
Outline
Equal-weight choices
Ghost
Toolbars and dense rows
Destructive
Irreversible actions only
ShapesPermalink to this section
Default is rectangular and follows the system control radius. Pill is an explicit opt-in to the shared fully-rounded control token.
Material depthPermalink to this section
Depth changes the surface technique, not the action's meaning. Every treatment is built from Button component tokens, so semantic variants, presets, and light/dark mode remain authoritative.
Glossy
Specular upper plane
Glow
Light from inside
Metal
Pointer-reactive brushing
Foil
Ambient, pointer-reactive spectrum
Layered
Translucent stacked planes
Inset
Recessed inner walls
Glass
Translucent backdrop diffusion
Neon
Precise illuminated ring
Duotone
Hard extruded press
Satin
Soft matte dome
Use depth deliberately
Reserve dimensional treatments for a small number of prominent actions or expressive product surfaces. Dense toolbars and repeated actions should keep the default flattreatment.
SizesPermalink to this section
Three heights. Medium is the default; small belongs in dense toolbars and table rows, large on touch-first and marketing surfaces.
StatesPermalink to this section
Every variant implements the full state set. Focus is always visible, and loading keeps the label so the button does not resize mid-action.
Default
Hover
Pointer over the control
Focus visible
Keyboard focus only
Pressed
Scales to 98.5%
Loading
aria-busy, interaction blocked
Disabled
45% opacity, not focusable