Style props

Spacing, sizes, borders and colors are parameters on the components. Each value becomes a class and a CSS variable on the server: nothing is worked out in the browser, and enums and typed values catch most mistakes at build time.

Typed values

Closed sets are enums with IntelliSense: Align.Center, Justify.Between, Radius.Md, Shadow.Sm, Color.Fill. Sizes are a Length: Length.Prose, Length.Full, Length.Rem(15).

Spacing

Use a step from the scale, 0 to 16: steps up to 12 go up 4px at a time (0 to 48px), and 13 to 16 are 56, 64, 80 and 96px. Margins also go down to -16, pulling the element outward.

razor

<Card Padding="6" PaddingTop="2">...</Card>        @* 24px, 8px on top *@
<Stack PaddingX="4" MarginBottom="8">...</Stack>
<Box MarginX="-4">...</Box>                       @* pulls 16px into the padding around it *@

A side beats its axis, which beats all sides. Start and End follow the text direction, so layouts flip in right-to-left languages.

Borders, sizes and overflow

Use Border in whole pixels, with an axis or a side like padding, BorderColor and BorderStyle. On their own, BorderColor recolors a component's border and BorderStyle restyles a card's.

Preview Code

Preview

A band: Bg, BorderY="1", padding.

A box with Border, BorderColor and Radius.

New project

Code

Borders.razor

@* Surface props on boxes: a band with lines above and below, a bordered box, and a dashed card
   for an "add new" tile. *@
<Stack Gap="4" Grow>
    <Box Bg="Color.FillSubtle" BorderY="1" PaddingX="4" PaddingY="3">
        <TextBlock Size="TextSize.Sm">A band: <Code>Bg</Code>, <Code>BorderY="1"</Code>, padding.</TextBlock>
    </Box>
    <Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4">
        <Box Border="1" BorderColor="Color.Outline" Radius="Radius.Lg" Padding="4">
            <TextBlock Size="TextSize.Sm">A box with <Code>Border</Code>, <Code>BorderColor</Code> and <Code>Radius</Code>.</TextBlock>
        </Box>
        <Card BorderStyle="BorderStyle.Dashed" Size="ControlSize.Sm">
            <Row Gap="2" Align="Align.Center">
                <Icon Name="Lucide.Plus" />
                <TextBlock Size="TextSize.Sm">New project</TextBlock>
            </Row>
        </Card>
    </Grid>
</Stack>

Width, Height and their minimums and maximums take a Length. Overflow says what happens to content that doesn't fit: MaxHeight="Length.Rem(20)" Overflow="Overflow.Auto" scrolls it.

Colors

Color is the text color and Bg the background, as in CSS. A theme color as Bg picks its text color: Bg="Color.Primary" gets OnPrimary, and Bg="Color.DangerSoft" gets DangerText. Controls take an Accent instead, a whole set of colors (fill, text on it, a soft tint): Primary, Neutral or Danger, or any color:

razor

<Box Bg="Color.Fill" Color="Color.Muted" Padding="4">...</Box>
<Button Accent="Accent.Danger">Delete</Button>
<Button Accent='Accent.Of("#0f766e")'>Approve</Button>

Badges, alerts, banners and toasts take a Status, which also sets the icon and what screen readers hear. See Tokens and customizing for the colors themselves.

Item props and surface props

Item props say how a component sits in its parent: margins, widths, Grow, AlignSelf, ColSpan. Nearly every component takes them. Surface props say how a box looks inside: padding, background, radius, shadow, borders, heights. Box and everything built on it take both.

Item props go on the element the parent lays out. For a field, that's the wrapper around the label, control and hint, so Grow widens all of it:

razor

<Row Gap="2" Align="Align.End">
    <TextField @bind-Value="Query" Label="Search" Grow />
    <Button>Search</Button>
</Row>

Class and Style go on the same element, for anything the props don't cover. On Menu, Popover and Tooltip, item props go on the trigger and Class and Style on the panel.

Your own values

Color.Token("brand") uses a token of yours, Color.Of("#ff6600") a literal color, and Length.Of("calc(100% - 2rem)") any CSS length. Raw values are checked for characters that could break out of a style. Add @using IzzyBlazor.Units to write Width="15.Rem" or MinHeight="100.Dvh"; it's a separate namespace because it adds members to every number in files that import it.

Item props

How a component sits in its parent: margins, widths, growing and shrinking, alignment and column spans. Almost every component takes them.

Item props
Name	Type	Responsive	Description
`Margin`	`Responsive<int>`	Yes	Margin on all sides, in spacing steps (-16 to 16; one step = 4px).
`MarginX`	`Responsive<int>`	Yes	Horizontal margin. When set, replaces `Margin` on this axis.
`MarginY`	`Responsive<int>`	Yes	Vertical margin. When set, replaces `Margin` on this axis.
`MarginTop`	`Responsive<int>`	Yes	Top margin. When set, replaces `MarginY` and `Margin` on this side.
`MarginBottom`	`Responsive<int>`	Yes	Bottom margin. When set, replaces `MarginY` and `Margin` on this side.
`MarginStart`	`Responsive<int>`	Yes	Margin at the start (left in left-to-right text, right in right-to-left). Replaces `MarginX` and `Margin` on this side.
`MarginEnd`	`Responsive<int>`	Yes	Margin at the end (right in left-to-right text, left in right-to-left). Replaces `MarginX` and `Margin` on this side.
`Width`	`Responsive<Length>`	Yes	Width.
`MinWidth`	`Responsive<Length>`	Yes	Minimum width.
`MaxWidth`	`Responsive<Length>`	Yes	Maximum width.
`Grow`	`bool`		Whether to grow into free space inside a Stack, Row or Column: `<Box Grow>`.
`Shrink`	`bool`		Whether to shrink when space is short inside a Stack, Row or Column. Defaults to true; `Shrink="false"` keeps the size.
`Basis`	`Responsive<Length>`	Yes	Starting size inside a Stack, before growing or shrinking.
`AlignSelf`	`Responsive<Align>`	Yes	Alignment across the parent's direction, overriding the parent's `Align` for this component only, such as a button lined up with the bottom of labeled fields in a Row.
`ColSpan`	`Responsive<int>`	Yes	How many columns it spans in a `Form` or `Fieldset` with `Columns`, or a `Grid`; `GridSpan.Full` for the whole row. Never more than the columns shown, so a form that narrows to one column needs no breakpoints.
`NewRow`	`bool`		Starts a new row in a `Form` or `Fieldset` with `Columns`, or a `Grid`, leaving the rest of the row before it empty.

Taken by 63 components: Box, Row, Column, Stack, Grid, Container, Section, Center, Spacer, AspectRatio, Divider, SiteNav, ColorSchemeSwitch, Heading, TextBlock, List, Prose, Anchor, Code, CodeExample, Kbd, Highlight, Button, IconButton, ButtonGroup, Toolbar, ConfirmButton, CopyButton, Form, Fieldset, FileUpload, FilterForm, Dialog, Drawer, Menu, Popover, Tooltip, NavMenu, Tabs, Breadcrumb, Pagination, PrevNext, OnThisPage, Stepper, Alert, Banner, Badge, Tag, Spinner, Progress, Skeleton, EmptyState, Table, Card, Stat, DescriptionList, Avatar, AvatarGroup, Image, VideoEmbed, Timeline, Accordion, Collapsible

Surface props

How a box looks: padding, background, text color, radius, shadow, borders, heights and overflow. Boxes and containers take them, on top of the item props.

Surface props
Name	Type	Responsive	Description
`ColorScheme`	`ColorScheme`		The color scheme inside: `ColorScheme.Dark` for a dark band on a light page, `ColorScheme.Inverse` for the opposite of the page. It also sets the surface background and text color, which `Bg` and `Color` override.
`Padding`	`Responsive<int>`	Yes	Padding on all sides, in spacing steps (0 to 16; one step = 4px).
`PaddingX`	`Responsive<int>`	Yes	Horizontal padding. When set, replaces `Padding` on this axis.
`PaddingY`	`Responsive<int>`	Yes	Vertical padding. When set, replaces `Padding` on this axis.
`PaddingTop`	`Responsive<int>`	Yes	Top padding. When set, replaces `PaddingY` and `Padding` on this side.
`PaddingBottom`	`Responsive<int>`	Yes	Bottom padding. When set, replaces `PaddingY` and `Padding` on this side.
`PaddingStart`	`Responsive<int>`	Yes	Padding at the start (left in left-to-right text, right in right-to-left). Replaces `PaddingX` and `Padding` on this side.
`PaddingEnd`	`Responsive<int>`	Yes	Padding at the end (right in left-to-right text, left in right-to-left). Replaces `PaddingX` and `Padding` on this side.
`Bg`	`Responsive<Color>`	Yes	Background color.
`Color`	`Responsive<Color>`	Yes	Text color. When not set and `Bg` is a theme color, the matching contrast color is used automatically (`Bg="Color.Primary"` gets `Color.OnPrimary` text).
`Radius`	`Responsive<Radius>`	Yes	Corner radius.
`Shadow`	`Responsive<Shadow>`	Yes	Elevation.
`MinHeight`	`Responsive<Length>`	Yes	Minimum height.
`Height`	`Responsive<Length>`	Yes	Height.
`MaxHeight`	`Responsive<Length>`	Yes	Maximum height; pair it with `Overflow` to scroll what doesn't fit.
`Overflow`	`Responsive<Overflow>`	Yes	What happens to content that doesn't fit: `Overflow.Auto` to scroll it.
`Border`	`Responsive<int>`	Yes	A border on every side, in whole pixels (0 to 16), in `BorderColor` (the border token by default) and `BorderStyle` (solid by default). Like padding: `BorderX` and `BorderY` override an axis, the single sides override that. Sides you don't set keep the component's own border.
`BorderX`	`Responsive<int>`	Yes	Borders at the start and end. Replaces `Border` on this axis.
`BorderY`	`Responsive<int>`	Yes	Borders at the top and bottom, such as a band with lines above and below. Replaces `Border` on this axis.
`BorderTop`	`Responsive<int>`	Yes	The top border. Replaces `BorderY` and `Border` on this side.
`BorderBottom`	`Responsive<int>`	Yes	The bottom border. Replaces `BorderY` and `Border` on this side.
`BorderStart`	`Responsive<int>`	Yes	The border at the start (left in left-to-right text). Replaces `BorderX` and `Border` on this side.
`BorderEnd`	`Responsive<int>`	Yes	The border at the end (right in left-to-right text). Replaces `BorderX` and `Border` on this side.
`BorderColor`	`Responsive<Color>`	Yes	The border color, for borders set here or the component's own. Defaults to `Border`.
`BorderStyle`	`Responsive<BorderStyle>`	Yes	How borders set here are drawn (`BorderStyle.Dashed`, `BorderStyle.Dotted`), and the own border of a `Card` or a bordered `EmptyState`. Solid by default (dashed on an EmptyState).

Taken by 23 components: Box, Row, Column, Stack, Grid, Container, Section, Center, Spacer, AspectRatio, Divider, Heading, TextBlock, List, Prose, Fieldset, Skeleton, EmptyState, Card, DescriptionList, Image, VideoEmbed, Timeline

Field props

What every form field shares: label, hint, required, disabled, read-only and size, plus the item props on the field's wrapper.

Field props
Name	Type	Responsive	Description
`Label`	`string?`		The visible label. Defaults to the model property's `[Display(Name)]`, or its name.
`HideLabel`	`bool`		Keeps the label for screen readers but doesn't show it, as in a toolbar or a one-field newsletter form. Checkboxes and switches show their label beside the box, so this doesn't apply.
`Hint`	`string?`		Help text shown under the field and linked to it for screen readers.
`Required`	`bool?`		Whether a value is required. Defaults to whether the property has `[Required]`.
`Disabled`	`bool`		Disables the field. Disabled fields are not posted with the form.
`Size`	`ControlSize`		Height, shared with buttons. Defaults to `ControlSize.Md`.
`Class`	`string?`		Classes for the field's outer wrapper (label, control, hint and error).
`Style`	`string?`		Inline style for the field's outer wrapper, after its generated custom properties.
`HiddenFrom`	`Breakpoint?`		Hides the field from this breakpoint up.
`VisibleFrom`	`Breakpoint?`		Shows the field only from this breakpoint up.
`Margin`	`Responsive<int>`	Yes	Margin on all sides, in spacing steps (-16 to 16; one step = 4px).
`MarginX`	`Responsive<int>`	Yes	Horizontal margin. When set, replaces `Margin` on this axis.
`MarginY`	`Responsive<int>`	Yes	Vertical margin. When set, replaces `Margin` on this axis.
`MarginTop`	`Responsive<int>`	Yes	Top margin. When set, replaces `MarginY` and `Margin` on this side.
`MarginBottom`	`Responsive<int>`	Yes	Bottom margin. When set, replaces `MarginY` and `Margin` on this side.
`MarginStart`	`Responsive<int>`	Yes	Margin at the start (left in left-to-right text). Replaces `MarginX` and `Margin` on this side.
`MarginEnd`	`Responsive<int>`	Yes	Margin at the end (right in left-to-right text). Replaces `MarginX` and `Margin` on this side.
`Width`	`Responsive<Length>`	Yes	Width of the whole field (label, control, hint).
`MinWidth`	`Responsive<Length>`	Yes	Minimum width of the whole field.
`MaxWidth`	`Responsive<Length>`	Yes	Maximum width of the whole field.
`Grow`	`bool`		Whether to grow into free space inside a Stack, Row or Column: `<TextField Grow />`.
`Shrink`	`bool`		Whether to shrink when space is short inside a Stack, Row or Column. Defaults to true.
`Basis`	`Responsive<Length>`	Yes	Starting size inside a Stack, before growing or shrinking.
`AlignSelf`	`Responsive<Align>`	Yes	Alignment across the parent's direction, overriding the parent's `Align` for this field only.
`ColSpan`	`Responsive<int>`	Yes	How many columns the field spans in a `Form` or `Fieldset` with `Columns`; `GridSpan.Full` for the whole row. Never more than the columns shown.
`NewRow`	`bool`		Starts a new row in a `Form` or `Fieldset` with `Columns`, or a `Grid`, leaving the rest of the row before it empty.

Taken by 13 components: TextField, TextArea, NumberField, Slider, ColorPicker, Select, Combobox, MultiSelect, Checkbox, Switch, RadioGroup, CheckboxGroup, SegmentedControl

Common props

Every component takes these: extra classes and styles, any other attribute, and hiding by breakpoint.

Common props
Name	Type	Description
`Class`	`string?`	Extra CSS classes, merged after the component's own classes.
`Style`	`string?`	Inline style, appended after the component's generated custom properties.
`HiddenFrom`	`Breakpoint?`	Hides the component from this breakpoint up, such as a menu button only phones need.
`VisibleFrom`	`Breakpoint?`	Shows the component only from this breakpoint up, such as header links for wide screens.

Taken by 66 components: Box, Row, Column, Stack, Grid, Container, Section, Center, Spacer, AspectRatio, Divider, AppShell, AppSidebar, SiteNav, ColorSchemeSwitch, Heading, TextBlock, List, Prose, Anchor, Code, CodeExample, Kbd, Highlight, Icon, Button, IconButton, ButtonGroup, Toolbar, ConfirmButton, CopyButton, Form, Fieldset, FileUpload, FilterForm, Dialog, Drawer, Menu, Popover, Tooltip, NavMenu, Tabs, Breadcrumb, Pagination, PrevNext, OnThisPage, Stepper, Alert, Banner, Badge, Tag, Spinner, Progress, Skeleton, EmptyState, Table, Card, Stat, DescriptionList, Avatar, AvatarGroup, Image, VideoEmbed, Timeline, Accordion, Collapsible