@page "/democomp"
@* Sidebar *@
@* *@
3

Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Outline buttons

Link buttons

Sizes

Button states

Segmented Buttons

Icon Buttons

Radio

Radio buttons allow the user to select a single choice from a group of options.

@*
*@
@*
*@

Input

Inputs buttons allow the user to select a single choice from a group of options.

Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Header
Action Another action
Something else here
@code { DateTime date = DateTime.Today; }
Some helping Text
At least 6 characters required

Grid

1
2
3
4
5
6
7
8
9
10
11
12

Data Grid

Data grid DENSE + COLLAPSE + SELECT

Chip label text
Date of entry Product Material code Price
Chip label text
Select all
Select all active
@* *@
Product 1
0023 001445669 1
Product serial code
Test Test 1
Material 29
77,29

Form wizard

Description for step 1
@*
*@
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
2
3

Card

Cards contain content and actions that relate information about a subject.

Profile title
Profile subhead

Card Title

Card Subhead

Cards contain content and actions that relate information about a subject.

Snackbar message text
Snackbar dialog title
17:22
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus
Snackbar action
@code { private string sidebarClosed { get; set; } = "close"; private void ToggleSidebar() { sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; } private string sidebarRightClosed { get; set; } = "close-r"; private void ToggleSidebarRight() { sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; } private string NavClosed { get; set; } = ""; private void ToggleNav() { NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } private string ModalShown { get; set; } = ""; private void ToggleModal() { ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : ""; } private string NextSlide { get; set; } = ""; private void ToggleNextSlide() { NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : ""; } private string PreviousSlide { get; set; } = ""; private void TogglePreviousSlide() { PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : ""; } }