Components

Button

Variants, sizes, and an unstyled mode

import { Button } from "@nyte-ai/ui";

The same name is exported unstyled from its own subpath. Pick one path per file.

import { Button } from "@nyte-ai/ui/button";

Button from the package root carries Nyte styling. Use default for the one primary action on a surface, secondary for a filled action that is not the primary one, outline for secondary actions beside it, ghost for toolbar and inline actions, and destructive for actions that remove or discard.

Usage

An icon-only button needs aria-label.
type defaults to "button" unless render replaces the element. Say type="submit" when you mean it.
Do not render a link as a Button. A link that looks like a button is an <a> styled by the app.
A button that becomes disabled while it holds focus should pass focusableWhenDisabled so focus does not fall to <body>.
A button whose label changes on activation, such as a loading state, should point aria-labelledby at the changing text. Some browser and screen reader pairs do not announce a focused button's descendant text changing.

Examples

Variants

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

Sizes

<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="icon-sm" aria-label="Add">
  <IconPlusSmall size={14} />
</Button>

Disabled

<Button disabled>Disabled</Button>
<Button variant="outline" disabled focusableWhenDisabled>
  Focusable when disabled
</Button>

Rendering as another element

If the element is not a <button>, add nativeButton={false} so Base UI keeps the keyboard and ARIA behavior. The element still has to be one that can take button semantics.

<Button render={<div />} nativeButton={false}>
  Complex children
</Button>

Unstyled

unstyled keeps the behavior and drops the StyleX class.

<Button unstyled xstyle={myStyles.trigger}>
  Product-specific treatment
</Button>

The subpath export is the same thing without the appearance props.

<Button className="my-trigger">Product-specific treatment</Button>

Props

unstyled: true makes variant and size a type error.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	`"default"`	Fill and border treatment.
`size`	`"default" \| "sm" \| "icon-sm"`	`"default"`	28px, 24px, or 24×24 square with no horizontal padding.
`unstyled`	`boolean`	`false`	Render with no StyleX class. Forbids `variant` and `size`.
`className`	`string`		See Theming.
`style`	`React.CSSProperties`		See Theming.
`xstyle`	`XStyle`		See Theming.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Defaulted only when `render` is absent.

Button

A button component that can be used to trigger actions. Renders a <button> element.

Button Props:

Prop	Type	Default	Description
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	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>`).
className	`string \| ((state: Button.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Button.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Button.State) => ReactElement)`	-	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.

Button Data Attributes:

Attribute	Type	Description
data-disabled	-	Present when the button is disabled.

Accessibility

Renders a native <button>. Enter and Space activate it.
With render to a non-button and nativeButton={false}, Base UI adds role="button", tabIndex, and keyboard handlers.
disabled sets data-disabled and, on a native button, the disabled attribute. focusableWhenDisabled keeps it in the tab order with aria-disabled instead.
The focus ring appears on :focus-visible. See Focus.