---
title: "Button"
description: "Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action)."
sidebar_label: "Button"
slug: /reference/components/button
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Button

Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action).

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `ButtonProps`  
**Story source:** [`demo/stories/Button.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Button.stories.tsx)

## Live demo

<ComponentDemo name="Button" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
| `text` | `string` | Yes | The text content of the button. |
| `confirmationText` | `string` |  | The text content of the confirmation modal. |
| `disabled` | `boolean` |  | If true, the button will be disabled. |
| `fullWidth` | `boolean` |  | If true, the button will take the full width of its container. |
| `iconName` | `IconName` |  | The name of the icon to display in the button. |
| `iconPosition` | `union` |  | The position of the icon within the button. |
| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
| `modalSubTitle` | `string` |  | The subtitle of the confirmation modal. |
| `modalTitle` | `string` |  | The title of the confirmation modal. |
| `pressAnimation` | `ButtonPressAnimation` |  | The press animation to use when the button is touched. |
| `testID` | `string` |  | The test ID for the button, used for testing purposes. |
| `tooltipIdealPosition` | `TooltipPosition` |  | The position of the tooltip. |
| `tooltipIncludeArrow` | `boolean` |  | Include an arrow in the tooltip. Pointing to the button. |
| `tooltipText` | `string` |  | The text content of the tooltip. |
| `variant` | `union` |  | The type of the button, which determines its style. |
| `withConfirmation` | `boolean` |  | If true, a confirmation modal will be shown before the onClick action. |