# Button (/cloud/primitives/button) ```ts title="Import" import { Button } from "@nyte-ai/ui"; ``` Implemented in `packages/ui/src/components/ui/button.tsx`, wrapping [`@nyte-ai/ui/button`](/cloud/headless/button). ## Usage [#usage] * Use `default` for the one primary action on a surface, `outline` for secondary actions beside it, `ghost` for toolbar and inline actions, and `destructive` for actions that remove or discard. * Do not render a link as a Button. Base UI enforces button semantics; a link that looks like a button is an `` styled by the app. * `type` defaults to `"button"` unless `render` replaces the element, so a Button inside a form never submits by accident. Say `type="submit"` when you mean it. * An icon-only button (`size="icon-sm"`) **must** carry `aria-label`. * A button that becomes disabled while it holds focus (loading after click) should pass `focusableWhenDisabled` so focus does not fall to ``. ## Anatomy [#anatomy] A single element. `Button` renders ` ``` ## Examples [#examples] ### Variants [#variants] ```tsx ``` ### Sizes [#sizes] ```tsx ``` ### Disabled [#disabled] ```tsx ``` ### Rendering as another element [#rendering-as-another-element] Pass `render`. If the element is not a ` ``` ### Unstyled [#unstyled] ```tsx ``` ## Props [#props] `ButtonProps` is Base UI's `Button.Props` minus `className`/`style`, plus the styling channels and appearance props. `unstyled: true` makes `variant` and `size` a type error. | Prop | Type | Default | Description | | ----------- | ---------------------------------------------------- | ----------- | ---------------------------------------------------------- | | `variant` | `"default" \| "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` | | Consumer layout class, appended after the StyleX class. | | `style` | `React.CSSProperties` | | Inline style, merged after StyleX's. | | `xstyle` | `XStyle` | | StyleX override, applied last. | | `type` | `"button" \| "submit" \| "reset"` | `"button"` | Defaulted only when `render` is absent. | ### Inherited from Base UI Button [#inherited-from-base-ui-button] A button component that can be used to trigger actions. Renders a `