Forms

TwButton

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

Last updated 24 September 2026

Buttons

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

Razor

<TwButtonGroup>
    <TwButton AriaLabel="Action button" 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

@code {
    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

@code {
    private bool darkMode { get; set; }
    private void ToggleMode() => darkMode = !darkMode;
}

Buttons Variants & Colors

There are multiple different button variants.

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="block mt-4">
            <div class="p-3">
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Filled" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Outlined" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Text" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Elevated" />
            </div>
        </div>
    }
    else
    {
        <div class="block mt-4">
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Filled" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Outlined" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Text" />
                <TwButton Label="@c.ToString()" Color="@c" Class="m-1" Variant="@ButtonVariant.Elevated" />
            </div>
        </div>
    }
}

Buttons with Icons

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

Razor

<div class="mb-4">
    <TwButton Label="Download" StartIcon="Icon.Download" Variant="ButtonVariant.Filled" Color="Color.Primary" Class="m-1" />
    <TwButton Label="Next" EndIcon="Icon.Arrow_Right" Variant="ButtonVariant.Filled" Color="Color.Success" Class="m-1" />
    <TwButton Label="Delete" StartIcon="Icon.Trash" Variant="ButtonVariant.Outlined" Color="Color.Danger" Class="m-1" />
    <TwButton Label="Settings" StartIcon="Icon.Gear" Variant="ButtonVariant.Filled" Color="Color.Primary" Class="m-1" />
</div>

All Colors

Buttons support all color themes from the color palette:

Razor

@foreach (Color c in (Color[]) Enum.GetValues(typeof(Color)))
{
    <TwButton Label="@c.ToString()" Color="@c" Class="m-1" />
}

Button States

Buttons can be disabled or set to readonly mode:

Razor

<div class="mb-4">
    <TwButton Label="Filled Disabled" Variant="ButtonVariant.Filled" Color="Color.Primary" Disabled Class="m-1" />
    <TwButton Label="Outlined Disabled" Variant="ButtonVariant.Outlined" Color="Color.Primary" Disabled Class="m-1" />
    <TwButton Label="Text Disabled" Variant="ButtonVariant.Text" Color="Color.Primary" Disabled Class="m-1" />
    <TwButton Label="Readonly Button" Color="Color.Success" Readonly Class="m-1" />
</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>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwButtonTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Inherited from TwButton - this component reuses that theme rather than defining its own.

Property	Type	Controls
`ButtonRounded`	Rounded?
`ButtonShadow`	Shadow?
`DefaultVariant`	ButtonVariant?
`ButtonUppercase`	bool
`Uppercase`	string
`Base`	string
`Padding`	string
`DensePadding`	string
`IconButton`	string
`Typography`	string
`IconTypography`	string
`DisabledCursor`	string
`ReadonlyCursor`	string
`DefaultCursor`	string
`DisabledFilled`	string
`DisabledOutlined`	string
`DisabledText`	string

Full reference: TwButtonTheme on the API docs.