Button | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Default is the former name of Primary. The Default size is the base size, separate from the color role.

Emphasis level and size comparison
Role	Small	Default	Large
Primary Primary action / brand surface
Secondary Secondary action / neutral surface
Outline Secondary action / border
Ghost Low emphasis / transparent surface
Destructive Destructive action / semantic color
Link Lightweight inline action

No preview action taken.

Usage

Set a button's emphasis apart from its meaning. primary marks the one key action per area, on the brand surface. secondary (a borderless neutral surface) and outline (the only bordered variant) mark supporting actions, and ghost marks low emphasis. destructive signals danger at any priority. Without a variant a button is primary.

Don't use Button for page navigation. Use LinkButton, which looks like a button and stays a link. Don't mark destructive actions with color alone. Say what the action does in the label text.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Button → optional SVG icon + text that describes the action

Keyboard and accessibility

Tab moves focus. Enter or Space activates the button. While its action runs, disable the button or show progress beside it, and announce the result from one live region.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Button, LinkButton, Text } from '@surflane/ui'
import NextLink from 'next/link'

<Button onClick={runPreview}>Run preview</Button>
<Button variant='outline'>Inspect details</Button>
<Button disabled aria-describedby='deploy-reason'>Deploy</Button>
<Text id='deploy-reason' variant='caption'>Production is frozen until Monday.</Text>

// Navigation that looks like a button stays a link.
<LinkButton variant='outline' render={<NextLink href='/runs' />}>
  View runs
</LinkButton>

Key API

Button — common wrapper props
Prop	Contract	Default
`variant`	primary \| secondary \| outline \| ghost \| destructive \| link	primary
`size`	small \| default \| large \| icon \| icon-small \| icon-large	default
`disabled`	boolean	false
`LinkButton`	Button's variant and size on a link; render takes a router link	—

The table lists the common wrapper's main props. See the package type declarations for the full types.