> For the complete documentation index, see [llms.txt](https://nour-eldin-shobier.gitbook.io/carbon-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nour-eldin-shobier.gitbook.io/carbon-flutter/widgets/todo-button.md).

# Button

## Overview

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

![](https://2985180403-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhSQqKqKx7I7rVBbqF_%2Fuploads%2FRaYpiEkYBetKhXuQIBnz%2Fbuttons.png?alt=media\&token=d741e80c-2d6e-41d6-a642-b26845c510d3)

### Widget API

{% tabs %}
{% tab title="CButton" %}

| Property     | Description                                                                                                                                                                                                                                                                                             |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onTap        | <p>Called when the button is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                   |
| label        | <p>A text to display in the button.</p><ul><li><strong>Type:</strong> <code>String</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                          |
| enable       | <p>Whether the toggle is enabled or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                                                                                              |
| kind         | <p>The kind that the button represents. It can be <code>primary</code>, <code>secondary</code>, <code>danger</code>, <code>tertiary</code>, <code>ghost</code>.</p><ul><li><strong>Type:</strong> <code>CButtonKind</code></li><li><strong>Default:</strong> <code>CButtonKind.primary</code></li></ul> |
| size         | <p>The size of this button. It can be <code>regular</code>, <code>sm</code>, <code>md</code>.</p><ul><li><strong>Type:</strong> <code>CToggleSize</code></li><li><strong>Default:</strong> <code>CToggleSize.regular</code></li></ul>                                                                   |
| icon         | <p>An optional icon to display in the button.</p><ul><li><strong>Type:</strong> <code>Widget?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                                                               |
| expand       | <p>Whether the button should fill the available width.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>false</code></li></ul>                                                                                                                               |
| labelSize    | <p>The size (in logical pixels) to use when painting the label.</p><ul><li><strong>Type:</strong> <code>double</code></li><li><strong>Default:</strong> <code>14.0</code></li></ul>                                                                                                                     |
| {% endtab %} |                                                                                                                                                                                                                                                                                                         |

{% tab title="CButton.icon" %}

| Property      | Description                                                                                                                                                                                                                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onTap         | <p>Called when the button is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                   |
| icon          | <p>An icon to display in the button.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                         |
| enable        | <p>Whether the toggle is enabled or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                                                                                              |
| kind          | <p>The kind that the button represents. It can be <code>primary</code>, <code>secondary</code>, <code>danger</code>, <code>tertiary</code>, <code>ghost</code>.</p><ul><li><strong>Type:</strong> <code>CButtonKind</code></li><li><strong>Default:</strong> <code>CButtonKind.primary</code></li></ul> |
| size          | <p>The size of this button. It can be <code>regular</code>, <code>sm</code>, <code>md</code>.</p><ul><li><strong>Type:</strong> <code>CToggleSize</code></li><li><strong>Default:</strong> <code>CToggleSize.regular</code></li></ul>                                                                   |
| {% endtab %}  |                                                                                                                                                                                                                                                                                                         |
| {% endtabs %} |                                                                                                                                                                                                                                                                                                         |

### Example

```dart
CButton(
  label: 'Carbon Button',
  kind: CButtonKind.danger,
  icon: CIcon(CIcons.add, size: 16),
  size: CButtonSize.md,
  onTap: () {},
);

CButton.icon(
  kind: CButtonKind.danger,
  icon: CIcon(CIcons.add, size: 16),
  size: CButtonSize.md,
  onTap: () {},
);
```