Button

Triggers an action or event, such as submitting a form or opening a dialog.

Stable

Web

iOS

Android

@advui/core

JSX

<Button>Get started</Button>

PropsOpen in Playground

variant

size

disabled

loading

fullWidth

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Button } from '@advui/core'

export function SaveButton() {
  return <Button onPress={() => save()}>Save</Button>
}

Examples

Basic

Preview

Code

Variants

Six variants for different levels of emphasis.

Preview

Code

Sizes

Preview

Code

With icon

Preview

Code

Loading

Keeps its width, announces busy state and ignores presses.

Preview

Code

Disabled

Preview

Code

Full width (mobile)

Common for primary actions on small screens.

Preview

Code

API reference

Button

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'`	`'default'`	Visual style. Use one `default` button per view for the primary action.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	`'md'`	Height and padding.
`loading`	`boolean`	`false`	Shows a spinner, sets `aria-busy` and blocks presses.
`disabled`	`boolean`	`false`	Disables interaction and removes it from the tab order.
`icon`	`ReactNode`	—	Icon before the label. Inherits size and color.
`iconAfter`	`ReactNode`	—	Icon after the label.
`fullWidth`	`boolean`	`false`	Stretch to the container width.
`onPress`	`(event) => void`	—	Called on click, tap, Enter or Space.
`render`	`'button' \| 'a' \| ReactElement`	`'button'`	Render as a different element, e.g. `<a href>` for links.

Button.Text

Styled label for custom compositions. Plain string children are wrapped automatically.

Accessibility

Renders a native <button type="button"> on web and a pressable with role="button" on iOS/Android.
The visible label is the accessible name. Icons are decorative (aria-hidden).
Disabled buttons use the native disabled attribute, so they are skipped by Tab and announced as dimmed.
Loading sets aria-busy="true" and renders a progressbar named “Loading”.
Focus is shown with a 2px ring in the theme ring color (≥3:1 contrast).

Keyboard interactions
Key	Action
`Enter / Space`	Activates the button.
`Tab`	Moves focus to the next focusable element.

Responsive behavior

Use fullWidth (or width="max-sm:100%") for primary actions on phones. Sizes can change per breakpoint with flat values such as size="md sm:lg".

Platform notes

Web

Hover and press states use CSS; render={<a href="/pricing" />} turns it into a link.

iOS

Pressable area is extended with hitSlop to meet the 44pt minimum touch target.

Android

Same touch-target extension as iOS (48dp recommended; use lg for primary actions). With androidRipple (on in material()), presses show the native ripple.

Icon Button

Button Group

Toggle

Since v0.1.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousBack to Top

NextButton Group