Types and Styles

This section explains the different styles and types of Buttons.

Button styles

The Essential JS 2 Button has the following predefined styles that can be defined using the CssClass property.

@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton CssClass="e-primary">Primary</EjsButton>
<EjsButton CssClass="e-success">Success</EjsButton>
<EjsButton CssClass="e-info">Info</EjsButton>
<EjsButton CssClass="e-warning">Warning</EjsButton>
<EjsButton CssClass="e-danger">Danger</EjsButton>
<EjsButton CssClass="e-link">Link</EjsButton>

Output be like

Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers.

Button types

The types of Essential JS 2 Button are as follows:

• Flat Button
• Outline Button
• Round Button
• Toggle Button

Flat Button

The Flat Button is styled with no background color. To create a flat Button, set the CssClass property to e-flat.

Outline Button

An outline Button has a border with transparent background. To create an outline Button, set the CssClass property to e-outline.

Round Button

A round Button is shaped like a circle. Usually, it contains an icon representing its action. To create a round Button, set the CssClass property to e-round.

@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton CssClass="e-flat">Flat</EjsButton>
<EjsButton CssClass="e-outline">Outline</EjsButton>
<EjsButton CssClass="e-round" IconCss="e-icons e-plus-icon" IsPrimary="true"></EjsButton>

<style>
    .e-plus-icon::before {
        content: '\e823';
    }
</style>

Output be like

Toggle Button

A toggle Button allows you to change between the two states. The Button is active in toggled state and can be recognized through the e-active class. The functionality of the toggle Button is handled by OnClick event. To create a toggle Button, set the IsToggle property to true. In the following code snippet, the toggle Button text changes to play/pause based on the state of the Button with the use of OnClick event.

@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton CssClass="e-flat" IsPrimary="true" IconCss="@IconCss" Content="@Content" IsToggle="true" OnClick="OnToggleClick" @ref="ToggleBtnObj"></EjsButton>

@code {
    EjsButton ToggleBtnObj;
    public string IconCss = "e-icons e-play";
    public string Content = "Play";
    public void OnToggleClick()
    {
        if(ToggleBtnObj.Content == "Play")
        {
            this.Content = "Pause";
            this.IconCss = "e-icons e-pause";
        }
        else
        {
            this.Content = "Play";
            this.IconCss = "e-icons e-play";
        }
    }
}

<style>

    .e-play::before {
        content: '\e324';
    }

    .e-pause::before {
        content: '\e326';
    }

</style>

Output be like

Icons

Button with font icons

The Button can have an icon to provide the visual representation of the action. To place the icon on a Button, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the Button. You can customize the icon’s position by using the IconPosition property.

@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton IconCss="e-icons e-play-icon" IconPosition="IconPosition.Right">PLAY</EjsButton>
<EjsButton IconCss="e-icons e-pause-icon">PAUSE</EjsButton>

<style>
    .e-play-icon::before {
        content: '\e324';
    }
    .e-pause-icon::before {
        content: '\e326';
    }
</style>

Output be like

The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icons on the Button using the IconCss property.

Button size

The two types of Button sizes are default and small. To change the size of the default Button to small Button, set the CssClass property to e-small.

@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton CssClass="e-small">SMALL</EjsButton>
<EjsButton>NORMAL</EjsButton>

Output be like