Button

Button is used to take action by clicking or pressing a specific key. The Button component set in the Axon 911 Design System file maps to this component. The Code Connect template is packages/ui/src/components/button/button.figma.ts; once it is published, Dev Mode shows <Button intent={ButtonIntent.Accent} ...> with real enum members. See Figma Code Connect. Use to designate key actions, such as accepting a condition that changes the product state. Allow one critical button per page; don't use alongside a primary button. Use for important actions like saving or creating something new. Allow one primary button per page; don't use alongside a critical button. Use for cancel and peer actions in footers and forms. Bare <Button> or SECONDARY_BUTTON_LAYOUT renders neutral soft outline by default. Set softFill={ButtonSoftFill.Filled} only when a filled neutral soft surface is required. Use occasionally as an alternative type to differentiate actions of lesser importance from those paired with primary and default buttons. Secondary buttons most often appear in buttons groups as the action of least importance. Navigation is Link from @prepared911/ui/link, not Button. Button has no href. Use variant={ButtonVariant.Plain} when the control is an action that should look like text. Use Link with appearance={LinkAppearance.Button} when a destination should look like a button. Internal links open in the same browser tab. Set external and newTabLabel. The link opens in a new tab and the label names that behavior. Semantic or color-coded buttons give users a sense of their purpose without even having to read their label. Use to indicate a constructive action or confirming a positive state (e.g., a completed process, approving an action). Use to indicate a destructive action or confirming a negative state (e.g., deleting or removing something, taking an irreversible action). A button with a downward-facing chevron as a tail icon, use in buttons with related actions instead of a button group. Split buttons can also include a lead icon. As with color, sizing also conveys a button's place in a page hierarchy. Use for primary call-taking actions that need a 44px touch target: pair size={ButtonSize.Coarse} with intent={ButtonIntent.Success} and variant={ButtonVariant.Solid} in an equal-width row (Grid with template={GridTemplate.EqualHalves} and fullSpan on each button). Type, icon, gap, and radius scale with this size. Use frequently for most actions. This is the default when size is omitted. Use when you need a slightly shorter control than large without going to the compact size. Use in tight spaces, such as sidebars and floating elements; only pair with other small-sized buttons. Use to identify or differentiate the button's usage, such as a "+" icon when adding something. Use to provide additional context about the button label or indicate what happens after clicking the button, such as an arrow "→" after "Next." Use to indicate that an action is in process; reverts to the previous state when completed. Use for unavailable actions. Always provide context (via tooltip or nearby text) for why the action is unavailable and how to enable it. active marks a momentary or current control with data-pressed and does not set aria-pressed. Use pressed and onPressedChange when the control must stay pressed. Pass pressed or defaultPressed with onPressedChange. The button sets aria-pressed. There is no toggle prop and no separate toggle type. Do not change the visible name when the pressed state changes. Icon-only toggles use icon, label, and pressedIcon when the glyph changes. Do not use these props inside a ToggleGroup. Group items remain ToggleGroupItem. loading keeps the label visible, sets aria-busy, and disables the button. loadingLabel is the accessible name of the busy state. There is no loading-type enum.