--- title: Button description: Trigger an action or event. --- > LoamUI documentation, generated from the same source as the live page — > treat it as authoritative for `@loamui/core`. # Button A native button whose appearance is decided by its context, not by props. ## Import ```tsx import { Button } from "@loamui/core"; ``` ## Usage ### Contexts Buttons are neutral by default. Declare --loam-context on a region and the buttons inside re-answer their colour; there are no variant props. See the Contextualism guide. ```tsx
``` ### A region adapts every component --loam-context isn't a button feature: everything in the region answers it. Here the checkbox's fill, the button's tint and the loader's stroke all take the danger colour, and focus rings inside follow. Intent is declared once on the container, not as a colour prop on each control. ```tsx
``` ### Size and width from context There are no size or fullWidth props. Padding and font are fluid (container-relative tokens), so the button is sized by the space it lives in. Width is the parent's decision: a container of 16rem or less makes a button span it, a grid or stacked-flex region stretches its buttons (that is the platform's own layout at work), and a flex row shrink-wraps them to their labels. ```tsx
``` ### Icons and loading, composed as children There are no leftSection, rightSection or loading props. An svg child is detected via :has() and gets flex layout, a gap and 1em sizing. A composed Loader is detected and sized the same way. Icon-only is detected from the accessible name: add the aria-label the icon-only case requires anyway and the button becomes square. ```tsx ``` ## When to use it - To trigger an action in the current context: submitting a form, opening a dialog, confirming a choice. - For destructive or risky operations, inside a danger region, so the whole surrounding context signals the stakes rather than one red button. ## When not to - To navigate to another page or URL: use a link. A button that navigates breaks right-click, middle-click and "open in new tab". - For many low-emphasis choices at once: consider a Menu or Tabs instead of a row of equal buttons. ## How it works ### Buttons act, links navigate The element must match the behaviour, not the look. When a design wants a button-sized call-to-action that navigates, do not dress a Button as a link: use SignpostLink, which keeps real link semantics (right-click, middle-click, open-in-new-tab, link announcement) with the prominence the design asks for. The reverse holds too: an with an onClick that mutates data is still a button in disguise. ### Buttons don't submit by accident A bare