# Button
Triggers an action or event, such as submitting a form or opening a dialog.
## Installation
```tsx
import { Button } from "@makeplane/propel/components/button";
```
## Usage
```tsx
import { Button } from "@makeplane/propel/components/button";
export default function BasicDemo() {
return ;
}
```
## Examples
### With an icon
Pass `icon` and pick its side with `iconPosition` (`start` by default).
```tsx
import { Button } from "@makeplane/propel/components/button";
import { ArrowNarrowRightOutline, AddOutline } from "@makeplane/propel/icons";
export default function WithIconDemo() {
return (
} />
}
iconPosition="end"
/>
);
}
```
### Variants
Variant sets the visual weight and palette: `primary`, `secondary`, `tertiary`, and `ghost`, plus
`danger` and `danger-outline` for destructive actions.
```tsx
import { Button } from "@makeplane/propel/components/button";
export default function VariantsDemo() {
return (
);
}
```
### Sizes
`size` sets the height and everything that follows from it — text, glyph, padding, and radius
(xs 20 / sm 24 / md 28 / lg 32 px). There is no default: every call site picks one. `xs` is
inline chrome only: it ships a synthesized 24px pointer target, which is why the grouped families
have no `xs` rung at all — [ButtonGroup](/components/button-group) runs `sm`–`md` and
[SplitButton](/components/split-button) `sm`–`lg`, since their segments touch and adjacent targets
would intersect. See [Sizing](/foundations/sizing) for the full ladder.
```tsx
import { Button, type ButtonSize } from "@makeplane/propel/components/button";
const SIZES: ButtonSize[] = ["xs", "sm", "md", "lg"];
export default function SizesDemo() {
return (
{SIZES.map((size) => (
// The label carries a word as well as the rung: with a two-character label every button
// hits its min-width floor (internal/button-geometry.ts) and the padding ramp stops
// being visible.
))}
);
}
```
### Loading
The `loading` state shows a spinner in the icon slot, sets `aria-busy`, and blocks interaction while staying focusable.
```tsx
import { Button } from "@makeplane/propel/components/button";
export default function LoadingDemo() {
return (
);
}
```
### Full width
`stretch="full"` makes the button fill its container, e.g. a form row or a mobile CTA.
```tsx
import { Button } from "@makeplane/propel/components/button";
export default function FullWidthDemo() {
return (
);
}
```
### Disabled
`disabled` is the hard, non-focusable disabled state; unlike `loading`, it removes the button from the tab order.
```tsx
import { Button } from "@makeplane/propel/components/button";
export default function DisabledDemo() {
return (