BlazorUI Demo

Colors and palettes

Use semantic colors for meaning and palette families for visual differentiation.

Semantic colors

Semantic colors follow the application theme. Use Success, Warning, Error, and Info only when the color communicates that meaning.

Primary Success Warning Error Info
View code 
<BuiStack Orientation="Orientation.Horizontal" Gap="2" Wrap>
    <BuiBadge Color="BuiColors.Primary">Primary</BuiBadge>
    <BuiBadge Color="BuiColors.Success">Success</BuiBadge>
    <BuiBadge Color="BuiColors.Warning">Warning</BuiBadge>
    <BuiBadge Color="BuiColors.Error">Error</BuiBadge>
    <BuiBadge Color="BuiColors.Info">Info</BuiBadge>
</BuiStack>
Decorative palettes

Palette families are appropriate for dashboards, categories, series, and other cases where color distinguishes peers without implying status.

Orders

Teal

Customers

Violet

Reviews

Orange

View code 
<BuiGrid Columns="3" Gap="3">
    <BuiGridItem Xs="3" Md="1"><BuiCard Color="Palette.Teal"><BuiText Typo="Typo.H5">Orders</BuiText><BuiText>Teal</BuiText></BuiCard></BuiGridItem>
    <BuiGridItem Xs="3" Md="1"><BuiCard Color="Palette.Violet"><BuiText Typo="Typo.H5">Customers</BuiText><BuiText>Violet</BuiText></BuiCard></BuiGridItem>
    <BuiGridItem Xs="3" Md="1"><BuiCard Color="Palette.Orange"><BuiText Typo="Typo.H5">Reviews</BuiText><BuiText>Orange</BuiText></BuiCard></BuiGridItem>
</BuiGrid>
Tone and variant

Tone selects the intensity. Variant controls whether that color fills, softly tints, outlines, or minimally styles the component.

View code 
<BuiStack Orientation="Orientation.Horizontal" Gap="2" Wrap>
    <BuiButton Color="Palette.Teal" Tone="Tone.Muted" Variant="Variant.Soft">Muted</BuiButton>
    <BuiButton Color="Palette.Teal" Tone="Tone.Normal" Variant="Variant.Filled">Normal</BuiButton>
    <BuiButton Color="Palette.Teal" Tone="Tone.Vibrant" Variant="Variant.Outlined">Vibrant</BuiButton>
</BuiStack>

Available palette families: Slate, Red, Orange, Amber, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Pink, and Rose. Exact shades are available as Palette.Teal[50] through Palette.Teal[950] for charts and custom CSS; component parameters should normally receive the family itself.