# TwButton

> TwButton is a Blazor button component. Use Variant, Color, StartIcon, EndIcon, Href, Disabled and IconButton, or group buttons horizontally or vertically.

Documentation page: https://twblazor.com/button

## Buttons

Usage of the button component is simple, you can use it to trigger actions. Below are some common actions:

```razor
<TwButtonGroup>
    <TwButton Label="@($"Clicked {ClickCount} times")" Color="Color.Accent" StartIcon="Icon.Chat_Square_Dots" OnClick="HandleClick" />
    <TwButton AriaLabel="Submit Type" Label="Submit" Color="Color.Primary" StartIcon="Icon.Mailbox" OnClick="@(() => { /* your action */ })" Type="submit" />
</TwButtonGroup>
```

```csharp
public int ClickCount { get; set; } = 0;
private void HandleClick() => ClickCount++;
```

## Icon buttons

The button component can also be used with icons only:

```razor
<TwButtonGroup>
    <TwIcon Icon="@(darkMode ? Icon.Sun : Icon.Moon)" AriaLabel="Set light mode" OnClick="ToggleMode" Color="@(darkMode ? Color.Dark : Color.Light)" ButtonVariant="ButtonVariant.Filled" />
</TwButtonGroup>
```

```csharp
private bool darkMode { get; set; }
private void ToggleMode() => darkMode = !darkMode;
```

## Tooltips

Set `Tooltip` to show a short description when the button is hovered or keyboard-focused. It renders a `role="tooltip"` element linked to the button with `aria-describedby`, stays visible while the pointer moves onto it, and can be dismissed with `Escape`. A tooltip only supplements the accessible name, so icon-only buttons still need an `AriaLabel`. The same `Tooltip` property works on an icon button (`TwIcon` with `OnClick`).

```razor
<TwButtonGroup>
    <TwButton Label="Save" Color="Color.Primary" StartIcon="Icon.Save" Tooltip="Save your changes" />
    <TwButton Label="Delete" Variant="ButtonVariant.Outlined" Color="Color.Danger" Tooltip="This cannot be undone" />
    <TwIcon Icon="Icon.Question_Circle" AriaLabel="Help" Tooltip="Open the help centre" OnClick="@(() => { /* your action */ })" />
</TwButtonGroup>
```

## Buttons variants & colors

There are multiple different button variants.

```razor
<div class="flex flex-col gap-4">
    @foreach (Color c in Enum.GetValues<Color>())
    {
        <div class="@(c == Color.Light ? "grid grid-cols-2 gap-2 sm:flex sm:flex-wrap -mx-3 rounded-lg bg-gray-900 p-3" : "grid grid-cols-2 gap-2 sm:flex sm:flex-wrap")">
            <TwButton Label="@c.ToString()" Color="@c" Variant="@ButtonVariant.Filled" />
            <TwButton Label="@c.ToString()" Color="@c" Variant="@ButtonVariant.Outlined" />
            <TwButton Label="@c.ToString()" Color="@c" Variant="@ButtonVariant.Text" />
            <TwButton Label="@c.ToString()" Color="@c" Variant="@ButtonVariant.Elevated" />
        </div>
    }
</div>
```

## Buttons with icons

Buttons can include icons at the start or end for better visual communication:

```razor
<div class="flex flex-wrap gap-2">
    <TwButton Label="Download" StartIcon="Icon.Download" Variant="ButtonVariant.Filled" Color="Color.Primary" />
    <TwButton Label="Next" EndIcon="Icon.Arrow_Right" Variant="ButtonVariant.Filled" Color="Color.Success" />
    <TwButton Label="Delete" StartIcon="Icon.Trash" Variant="ButtonVariant.Outlined" Color="Color.Danger" />
    <TwButton Label="Settings" StartIcon="Icon.Gear" Variant="ButtonVariant.Filled" Color="Color.Primary" />
</div>
```

## All colors

Buttons support all color themes from the color palette:

```razor
<div class="flex flex-wrap gap-2">
    @foreach (Color c in Enum.GetValues<Color>())
    {
        <TwButton Label="@c.ToString()" Color="@c" />
    }
</div>
```

## Button states

Buttons can be disabled or set to readonly mode:

```razor
<div class="flex flex-wrap gap-2">
    <TwButton Label="Filled Disabled" Variant="ButtonVariant.Filled" Color="Color.Primary" Disabled />
    <TwButton Label="Outlined Disabled" Variant="ButtonVariant.Outlined" Color="Color.Primary" Disabled />
    <TwButton Label="Text Disabled" Variant="ButtonVariant.Text" Color="Color.Primary" Disabled />
    <TwButton Label="Readonly Button" Color="Color.Success" Readonly />
</div>
```

## Basic button groups

Group related buttons together with consistent spacing.

```razor
<TwButtonGroup>
    <TwButton Label="First" Color="Color.Primary" />
    <TwButton Label="Second" Color="Color.Primary" />
    <TwButton Label="Third" Color="Color.Primary" />
</TwButtonGroup>
```

## Vertical button groups

Stack buttons vertically.

```razor
<TwButtonGroup Vertical>
    <TwButton Label="Top" Color="Color.Success" StartIcon="Icon.Arrow_Up" />
    <TwButton Label="Middle" Color="Color.Success" />
    <TwButton Label="Bottom" Color="Color.Success" EndIcon="Icon.Arrow_Down" />
</TwButtonGroup>
```

## Full width button groups

Make buttons fill the container width equally.

```razor
<TwButtonGroup FullWidth>
    <TwButton Label="Option 1" Color="Color.Accent" Variant="ButtonVariant.Outlined" />
    <TwButton Label="Option 2" Color="Color.Accent" Variant="ButtonVariant.Outlined" />
    <TwButton Label="Option 3" Color="Color.Accent" Variant="ButtonVariant.Outlined" />
</TwButtonGroup>
```

## Keyboard navigation

A button is a native button, or a native link when it has an Href.

| Key | What it does |
| --- | --- |
| `Tab` | Moves focus to the button. A read-only button stays focusable and is announced as unavailable. |
| `Enter` or `Space` | Activates the button. |
| `Escape` | Hides the button's tooltip, if it has one. |

## Parameters

This is every parameter the component accepts. Do not use parameters that are not listed here.

### TwButton

Represents a configurable button component that supports custom content, navigation, and event handling in a Blazor application.

| Parameter | Type | Description |
| --- | --- | --- |
| `OnClick` | `EventCallback` | Gets or sets the callback that is invoked when the button is clicked. |
| `Label` | `string` | Gets or sets the text label to display for the button. |
| `Type` | `string` | The type of button (e.g., "button", "submit", "reset"). |
| `Color` | `Color?` | Gets or sets the color theme of the button. |
| `Variant` | `ButtonVariant?` | Gets or sets the button variant. |
| `StartIcon` | `Icon?` | Gets or sets whether to display an icon at the start of the button. |
| `EndIcon` | `Icon?` | Gets or sets whether to display an icon at the end of the button. |
| `Href` | `string` | Sets the button to use `NavigationManager`. |
| `Disabled` | `bool` | Disables the button if set to true. |
| `Readonly` | `bool` | Makes the button readonly if set to true. |
| `Dense` | `bool` | Gets or sets a value indicating whether the component should be displayed in a dense layout. |
| `ChildContent` | `RenderFragment?` | Gets or sets the custom content to display in the button. |
| `Target` | `string` | Gets or sets the name of the target frame or window for the navigation request. |
| `IconButton` | `bool` | Gets or sets a value indicating whether padding is removed from the content. |
| `Plain` | `bool` | When true, skips the button's base structural classes (sizing/shape), typography, variant/color classes, focus ring, and shadow - leaving only `Class` (and the disabled/readonly cursor class) applied. |
| `Tooltip` | `string?` | Gets or sets the text of a tooltip shown when the button is hovered or keyboard-focused. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary<string, object>` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |

### TwButtonGroup

Represents a container component for grouping multiple `TwButton` components together.

| Parameter | Type | Description |
| --- | --- | --- |
| `ChildContent` | `RenderFragment?` | Gets or sets the content to display within the button group. |
| `Legend` | `string?` | Gets or sets the legend text for the button group. |
| `LegendClass` | `string?` | Gets or sets the CSS class for the legend element. |
| `Vertical` | `bool` | Gets or sets the orientation of the button group. |
| `FullWidth` | `bool` | Gets or sets whether buttons should take full width of the container. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary<string, object>` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |

## Theme

Styled by `TwButtonTheme`. Include it by ticking this component on the Theme builder (https://twblazor.com/theme) and replacing `Theme.cs` with the newly generated file. Never write or edit `TwButtonTheme` by hand.