pureblazor logo

Buttons

render modes
  • server
  • webassembly

Use buttons when you need interactivity, such as saving a form. Prefer buttons over links, except when navigating to a different page.


Default Buttons

Code Sample
<PureButton Accent="Success" Accent="Brand">Success</PureButton>

Outline Buttons

Code Sample
<PureButton Variant="PureVariant.Outline" Accent="Brand">Primary</PureButton>

Subtle Buttons

Code Sample
<PureButton Variant="PureVariant.Subtle" Accent="Brand">Primary</PureButton>

Customized Button Theme

You can completely override all default themes.

Code Sample
<CascadingValue Value="demoTheme">
    <PureButton Accent="Brand">Brand</PureButton>
    <PureButton Accent="Success">Success</PureButton>
    <PureButton Accent="Warning">Warning</PureButton>
    <PureButton Accent="Danger">Danger</PureButton>
    <PureButton Accent="Accent.Default">Default</PureButton>
</CascadingValue>
@code {
    private readonly DefaultTheme theme = new();
    private PureTheme demoTheme;

    public Buttons()
    {
        var customizedVariants = new Dictionary<PureVariant, Dictionary<Accent, string>>
        {
            {
                PureVariant.Default,
                new Dictionary<Accent, string>
                {
                    {
                        Accent.Brand,
                        "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:bg-gradient-to-l"
                    },
                    { Accent.Success, "bg-gradient-to-r from-brand-300 to-emerald-500 hover:bg-gradient-to-l" },
                    {
                        Accent.Danger,
                        "bg-gradient-to-r from-orange-300 from-10% via-red-700 via-50% to-90% to-orange-700 hover:bg-gradient-to-l"
                    },
                    {
                        Accent.Default,
                        "bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500"
                    }
                }
            }
        };

        var customizedStyles = new Dictionary<string, ComponentStyle>
        {
            {
                nameof(PureButton),
                new ComponentStyle(theme.Styles[nameof(PureButton)].Base, null, customizedVariants,
                    theme.Styles[nameof(PureButton)].Sizes)
            }
        };

        theme.Merge(customizedStyles);

        demoTheme = theme with { Styles = customizedStyles };
    }
}

Customized Buttons

You can customize buttons ad-hoc without creating an entire theme.

Code Sample
<CascadingValue Value="Theme.Off">
    <PureButton Styles="bg-sky-400 text-gray-50 text-3xl p-3 cursor-pointer">Custom button 1</PureButton>
    <PureButton Styles="bg-emerald-400 text-gray-50 text-3xl p-3 cursor-pointer">Custom button 2</PureButton>
</CascadingValue>

Button States

Code Sample
<PureButton OnClick="() => clickCount2++">Click me</PureButton>
<PureButton Accent="Success" OnClick="() => clickCount2++" Disabled="true">Can't click me now</PureButton>
<PureButton Accent="Warning" OnClick="() => clickCount2++" Loading="true">Waiting for something</PureButton>

Buttons with Icons

Code Sample
<PureButton Accent="Danger" LeftIcon="PureIcons.IconBeaker">Experiment</PureButton>

Button Effects

Enable a simple hover or press effect on your buttons. Enable globally by default or per button.

Motion Effect Warning

The below effects have motion and may affect people with vestibular disorders.

Regarding Motion Effects
If the `prefers-reduced-motion` media feature detects a user wants to reduce motion, certain effects may be limited. Read more

Headless

As with all components, you can disable the theme completely.