Components

Button

Lets people start an action and makes the most important action in an area easy to find.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Button } from '@bigbang/ui';
Source: Button.tsx
Storybook: Button · Playground

Button lives in the @bigbang/ui package. An application takes it and the token package from the workspace:

{
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*"
  }
}

The application’s entry stylesheet imports the component styles and the brand files it uses. Brand and mode are chosen with two attributes on the root element:

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

<html data-brand="neutral" data-theme="light">

Props

variant

Description: How important the action is. An area has only one primary Button; tertiary has no fill or border. glass and glass-prominent are for controls over media or a busy backdrop: they are glass even without a glass Provider, and look like secondary and primary where glass renders solid. They have no danger tone.
Type: 'primary' | 'secondary' | 'tertiary' | 'glass' | 'glass-prominent'
Default: 'primary'

tone

Description: What the action does. danger marks an action that deletes or cannot be undone; pair it with a confirmation step.
Type: 'neutral' | 'danger'
Default: 'neutral'

size

Description: Height and inline padding: 24, 32, 36 and 40 px. xs is for in-cell actions in dense tables.
Type: 'xs' | 'sm' | 'md' | 'lg'
Default: 'md'

fullWidth

Description: Stretches the Button to the width of its container. Meant for mobile forms and single-action steps.
Type: boolean
Default: false

type

Description: Form behaviour. Use 'submit' for the Button that submits the form.
Type: 'button' | 'submit' | 'reset'
Default: 'button'

disabled

Description: Turns off interaction and removes the Button from the tab order.
Type: boolean
Default: false

focusableWhenDisabled

Description: Keeps the Button focusable while disabled: aria-disabled is set instead of disabled. Use it when nearby text explains why. Whether the button should be focusable when disabled.
Type: boolean
Default: false false

render

Description: Renders the Button as another element, such as a link. If the element is not a <button>, set nativeButton={false}. Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
Type: ReactElement | ComponentRenderFn<HTMLProps, ButtonState>

nativeButton

Description: Whether the element given in render is a native <button>. Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean
Default: true true

className

Description: For layout only: margins and grid placement. Do not use it to change colour or size.
Type: string

children

Description: The label. Keep it a short verb phrase.
Type: ReactNode

loading

Description: Shows a spinner over the label and ignores clicks while the action runs. The Button keeps its width and stays focusable. Use it for actions that take longer than about a second.
Type: boolean
Default: false

loadingLabel

Description: Text announced once to screen readers when loading starts, such as "Saving". The Button keeps its label as its name. Without it, the library string ui.button.loading is announced in the Provider's language ("Yükleniyor" or "Loading").
Type: string

success

Description: Shows a check mark over the label once the action has finished, and announces it once. Set it when the action succeeds and clear it after motionValues.motion['feedback-hold'] (2000 ms). loading wins while both are set.
Type: boolean
Default: false

successLabel

Description: Text announced once to screen readers when success starts, such as "Saved". Without it, the library string ui.button.success is announced ("Tamamlandı" or "Done").
Type: string

startIcon

Description: Decorative icon element before the label, sized from size. Screen readers skip it; the label carries the meaning.
Type: ReactElement

endIcon

Description: Decorative icon element after the label, sized from size. Screen readers skip it; the label carries the meaning.
Type: ReactElement

Native <button> attributes and events (onClick, aria-*, form, name) are passed through. ref points to the rendered element.

Data attributes

Attribute	When
`data-disabled`	The Button is disabled or loading.
`data-loading`	`loading` is set. Read it together with `data-disabled` to tell loading from disabled.
`data-component="button"`	Always. The hook app styles and tests use to find a Button.

Rendering as a link

Actions that take people to another page are links. If a link has to look like a Button, render an <a> with render; screen readers then announce it as a link.

<Button render={<a href="/reports" />} nativeButton={false} variant="secondary">
  Go to reports
</Button>