imitation

Button

A button. Four variants, three sizes.

VariantsPrimary, secondary, tertiary, destructive

Disabled

Long label

Sizes

In context

ConfirmOne primary action, the destructive one outlined

Delete “Harbour rebrand”?

12 tasks and 3 files go with it. This can’t be undone.

Mobile additions

block, iconOnly, startIcon, hrefFull-width actions, round icon buttons, link as button, a rounded shape

block

icon only

link as button

Read our mission Open in browser

Rounded

Start icon

Icon only sm / md / lg

Block loading

Link style (tertiary + href)

Disabled link

Open

Account actions and sign inIn context

Your Account

Your data

Download everything tied to your account, exported still encrypted.

Danger zone

Permanently delete your account and all its data.

Read our mission

Athic

Welcome back

Create an account

Tonal

TonalA soft filled chip for a secondary action; size sm is the chip. Pill padding, font and fill are --rebar-button-* tokens.

Medium

Disabled

Props

Prop	Type	Required	Default
`variant`	`"primary" \| "secondary" \| "tertiary" \| "destructive" \| "tonal" \| undefined`	No	primary
`size`	`"sm" \| "md" \| "lg" \| undefined`	No	md
`loading`	`boolean \| undefined`	No	false
`bionic`	`boolean \| undefined`	No	—
`bionicOptions`	`BionicOptions \| undefined`	No	—
`block`	`boolean \| undefined`	No	—
`shape`	`"pill" \| "rounded" \| undefined`	No	pill
`startIcon`	`ReactNode`	No	—
`endIcon`	`ReactNode`	No	—
`iconOnly`	`boolean \| undefined`	No	—
`href`	`string \| undefined`	No	—
`target`	`string \| undefined`	No	—
`rel`	`string \| undefined`	No	—
`renderLink`	`RenderLink \| undefined`	No	—
`appearance`	`"default" \| "classic" \| undefined`	No	—
`loadingStyle`	`"spinner" \| "dots" \| undefined`	No	—
`asChild`	`boolean \| undefined`	No	—

Client-side routing

href renders a plain <a> (a full page load). Wrap your app once in <RebarLinkProvider renderLink={fn}> with your router's link adapter and every link-capable component (Button, Card, ListItem, ActionSheet items, Breadcrumb, NavBar, MobileTabBar, SidebarNav, NavIndex, Footer, ConstructSearch) navigates client-side. A renderLink prop on a component still wins.

<RebarLinkProvider renderLink={({ href, children, ...rest }) => <Link to={href} {...rest}>{children}</Link>}>
  <Button href="/settings">Settings</Button>
</RebarLinkProvider>

Accessibility

A real <button type="button"> by default (pass type="submit" for form submission): Tab to focus, Enter or Space to activate, a visible focus ring. aria-busy is set while loading.

data-rebar-* attributes

data-rebar-component="button", data-rebar-variant, data-rebar-size, data-rebar-state="idle" | "loading".

Migrating to Ant Design

@rebar-ui/migrate-antd renames variant to AntD's type/danger vocabulary and size="sm"|"md"|"lg" to "small"|"middle"|"large". If the element already has a native type (e.g. type="submit"), it is moved to AntD's htmlType prop first, since AntD's own type means visual variant, not HTML button type.

appearance="classic"

appearance="classic" is the plain mobile-UI button: 7px 12px, 17px / 1.4, 1px border, 4px radius, a pressed overlay, 40% opacity when disabled, and dots-only loading (loadingStyle="dots", also usable alone). Tune with --rebar-classic-button-padding / -font-size / -weight / -line-height / -border-width / -radius / -align / -disabled-opacity / -press-opacity and --rebar-classic-secondary-* / -tertiary-text.