Buttons
Button
Bit.BlazorUICompoundButtonIconButton
BitButton triggers an action or navigates when the user activates it. It renders a native button, or an anchor when an Href is provided, and offers Fill, Outline, and Text variants across a full palette of semantic colors and sizes. It supports start/end icons, an optional secondary line of text, and loading states that stack a spinner over the content so the box keeps the size and the accessible name it had before the click. It also stretches to the full width of its container, or leaves the flow entirely as a floating (FAB) button pinned to the viewport or to its container and draggable by pointer or by the arrow keys, and a BitParams ancestor carrying a BitButtonParams sets the defaults of every button in a subtree. Its defaults are accessibility-first: disabled buttons stay focusable through aria-disabled, an icon-only button keeps its label as its accessible name, the loading label is announced from a live region rather than folded into the button's name, an external link gets rel='noopener' on its own, and every state is re-established in system colors under Windows High Contrast.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The child content is the button's label. A second, quieter line can be added with SecondaryText,
which is what turns a button into a compound one that describes the action under its own name.
Variant & Rounded
Variant sets the emphasis: Fill (the default) for the one primary action of a view,
Outline for the secondary ones beside it, and Text for the lowest-emphasis commands.
Using the Variant parameter and its value of type BitVariant
enum:
Disabled suppresses the action and mutes all three variants:
Rounded gives the button pill-shaped corners. It is a choice rather than a default, so it wins over
a
--bit-Button-radius set on the button or on an ancestor.
Icon
IconName renders a built-in Fluent glyph and IconUrl a custom image; either sits at the start
of the label by default and moves to its end with IconPlacement. Both are hidden from screen readers,
since the label beside them already says what the button does.
Using the IconPlacement parameter and BitPlacement
enum as its value:
IconOnly drops the label and makes the button a square of the size class, the way a command bar
wants it - but keeps the label as screen-reader-only text, so the button is never announced as an
unlabeled one. Give it an AriaLabel instead when the visible label is not the name you want read,
or when there is no label to keep. Adding Rounded to that square is what makes it a circle.
Loading
IsLoading stacks a spinner over the content instead of replacing it, so the button keeps the size and
the accessible name it had before the click. It refuses a second click and says so with
aria-busy and aria-disabled - busy alone would report progress without reporting
that the press now does nothing. LoadingLabel adds text beside the spinner - announced from a live
region rather than folded into the button's name - and LoadingLabelPlacement places it.
Using the LoadingLabelPlacement parameter and its value of type
BitPlacement enum:
End...
Start...
Top...
Bottom...
AutoLoading keeps the state for you: the button enters the loading state for as long as the
OnClick handler is awaited, and leaves it even if the handler throws. Reclickable lets the
user click again while it is loading, and leaves the button reported - and drawn - as the available
control it still is. The re-click only raises OnClick: the loading state is left alone until the
run the last click started has ended.
AutoLoading click count: 0
Re-clickable AutoLoading click count: 0
LoadingDelay holds the spinner back for a number of milliseconds, so an operation that finishes
quickly never flashes one. Only the visuals wait: the click is blocked and aria-busy is rendered the
moment the loading starts. Click all three below - the first spins for the 250ms it works, the second runs
the same 250ms operation and stays still because it ends inside the delay, and the third works for 2s so
the spinner appears once the 500ms are up.
Href
An Href makes the component render a real anchor rather than a button, so it navigates, opens in a new
tab and offers the browser's own link menu while looking exactly the same. Target chooses where it
opens and Download saves the resource instead of navigating to it.
Rel describes the relationship between this page and the linked one, built from the
BitLinkRels flags and ignored for empty or hash-only hrefs. A
_blank target gets noopener added to whatever Rel says, which closes the reverse-tabnabbing
hole - unless Rel already says NoOpener, NoReferrer or Opener, the last being the one way to hand the new tab
its opener back. A rel written by hand is kept the same way.
Form & button type
ButtonType sets the native type: Submit submits the surrounding form, Reset clears it
and Button does neither. Inside an EditForm the type defaults to Submit, elsewhere to Button.
A reset is the browser's own: it empties the inputs and nothing else, so the model the
EditForm is bound to still holds what was typed and a submit right after would send it. Give the
reset button an OnClick that puts a fresh model back, and the form is cleared in both places.
Using the ButtonType parameter and its value of type
BitButtonType enum:
FormId is the id of the form the button belongs to, which lets a submit button live outside it - in a
dialog footer, or in a toolbar above the fields it commits. The rest of the native submit attributes -
formaction, formmethod, formnovalidate - have no parameter of their
own: write them on the component and they are passed through to the button.
Templates
PrimaryTemplate and SecondaryTemplate replace the two lines of text with markup of your own,
and LoadingTemplate replaces the whole spinner-and-label block while the button is loading. Like
the spinner it stands in for, it is hidden from screen readers - the content underneath keeps the button's
name, and LoadingLabel is what gets announced.
Events
OnClick is raised when the button is activated - by pointer, by Enter, or by Space - and is
suppressed while the button is disabled or loading. Its argument is the loading state the button was in
when the click arrived, which is what tells a Reclickable handler that it is being re-entered.
StopPropagation keeps the click from bubbling to the elements around the button, for an action
inside a clickable row or card:
Button clicks: 0, Parent clicks: 0
FullWidth & NoWrap
FullWidth stretches the button across its container, which is what a form's commit button and a
mobile layout usually want. NoWrap keeps each line of text on one line and ends it with an ellipsis
where it does not fit, so a long label cannot grow a toolbar row taller than the rest of it.
FixedColor
An Outline or Text button paints its foreground in its color role - the palette entry the Color
parameter picks - and swaps it for that role's on-color when hovered or pressed, since those states fill
the box with the role's own color. FixedColor paints the on-color from the start and holds it
through both. That is what a button sitting on a surface of its own color needs: the ones below are given
the tertiary background color on a tertiary background, so only the fixed ones are legible at rest. Hover
them to see the difference.
Float & Draggable
A floating button is pinned to a corner or an edge so it stays in view, and is raised off the content
it sits over. Float pins it to the viewport and FloatAbsolute to its container;
FloatPosition picks the anchor and FloatOffset the distance from it. With IconOnly
and Rounded it is the circular floating action button.
Draggable lets the user move it out of the way - by pointer, or with the arrow keys while it has
the focus (Shift for a coarser step), so the repositioning is never dragging-only. The click that
ends a drag is swallowed, so OnClick answers a press and not a move. A move cannot put the button
past the edges of what it is pinned to, and it holds until the anchor changes: setting
FloatPosition or FloatOffset again is what brings it back.
Using the FloatPosition parameter and its value of type
BitPosition enum:
BottomRight
FloatAbsolute & Draggable:
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and
dreams. These placeholder words symbolize the beginning - a moment of possibility where creativity has
yet to take shape. Imagine this text as the scaffolding of something remarkable, a foundation upon
which connections and inspirations will be built. Soon, these lines will transform into narratives that
provoke thought, spark emotion, and resonate with those who encounter them. Until then, they remind us
of the beauty in potential the quiet magic of beginnings, where everything is still to come, and the
possibilities are boundless. This space is yours to craft, yours to shape, yours to bring to life.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new - an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new - an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Accessibility
Title is the browser's own tooltip, shown on hover only, so it never stands in for an accessible
name. An IconOnly button keeps its own label for that; AriaLabel names one that has no label
to keep, and is worth keeping consistent with the Title beside it.
AriaDescription is a longer sentence rendered as visually hidden text the button points at through
aria-describedby. It is read after the name rather than as part of it, which makes it the place
for what the user wants to know before acting: the size of a file, what the next page will ask for. An
aria-describedby written on the component by hand is kept and this description is added to it.
Download the bit logo
A disabled button normally leaves the tab order, so keyboard and screen reader users can miss that the
action exists at all. AllowDisabledFocus - on by default here - conveys the state through
aria-disabled instead of the native attribute: the button stays focusable and discoverable, its
click stays suppressed, and the focus ring is drawn in the muted disabled color. It also keeps answering the
pointer, so its Title still explains why it cannot be pressed. Tab through the two below to feel the
difference, and hover the first for its reason.
FocusAsync moves the keyboard focus onto the button from code, for the moment a dialog opens, a step
finishes, or an error sends the user back to the action that failed. AutoFocus does the same on the
first render, and neither takes the focus to a button hidden with AriaHidden or disabled without
AllowDisabledFocus.
Cascading parameters
BitParams carries a BitButtonParams down to every button under it, so a toolbar, a dialog
footer or a whole page sets the variant, the size and the color once instead of on every button in it.
What it carries is a default and not an override: a button that sets a parameter for itself keeps its own
value, and only what it left unset is filled in - which is what lets the one destructive action in a row
step out of the cascade without the row having to know about it. Every value parameter of the component is
on the params object - the content templates and the OnClick callback are not - and each is filled in on
its own.
Color
Color picks the semantic role the button paints itself from - the fill of a Fill button, the border
and text of an Outline one, the text of a Text one, and the focus ring of all three. Beyond the eight
semantic roles, the background, foreground and border roles suit buttons that have to blend into a surface.
Using the Color parameter and its value of type BitColor enum:
Background colors:
Foreground colors:
Border colors:
External Icons
Beyond the built-in Fluent icons, the Icon parameter renders icons from external libraries such as
FontAwesome and Bootstrap Icons. Pass their CSS classes directly, or use the BitIconInfo helpers
(Css, Fa, Bi) to build them.
See the BitIconInfo section in the parameters table for usage.
FontAwesome:
Bootstrap:
Size
Size sets the preset that drives the button's type, padding, icon and minimum height together, so a
row of Small buttons lines up with the other Small controls beside it. Each size keeps an icon-only button
square and above the minimum pointer target.
Using the Size parameter and its value of type BitSize enum:
Small:
Loading...
Medium:
Loading...
Large:
Loading...
Style & Class
Beyond the root Style and Class, the Styles and Classes parameters reach the
button's individual parts - root, icon, the two lines of text, the loading container, the spinner and its
label - through the BitButtonClassStyles class.
Component's Style & Class:
Styles & Classes:
The public CSS variables restyle the defaults. They are read
off the root and never declared by the component, so one set on an ancestor re-skins every button inside it,
and one set on the Style of an instance re-skins that one alone - a tighter toolbar row, a taller touch
target, a squared-off box, without a single selector. They restyle the default, not a choice: an explicit
Color, Size or Rounded wins over the variables for what it sets.
RTL
Set the Dir parameter to Rtl to lay the button out for right-to-left languages; the icon, the
two lines of text, and the loading indicator all mirror accordingly.
در حال بارگذاری
در حال بارگذاری
در حال بارگذاری
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.
BitButton CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Button-color | Per variant: --bit-clr-pri-text when filled, --bit-clr-pri otherwise | Foreground (text and icon) in the rest state. FixedColor holds this color through hover and press as well. The Color parameter wins over it. |
| --bit-Button-background | --bit-clr-pri when filled, transparent otherwise | Background in the rest state. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. |
| --bit-Button-border-color | --bit-clr-pri when filled or outlined, transparent otherwise | Border color in the rest state. The border is drawn on every variant, so a Text button can take one without changing its size. The Color parameter wins over it, except over the transparent border of Text. |
| --bit-Button-hover-color | --bit-clr-pri-text, and the rest color for the Fill variant | Foreground while hovered (pointer devices only). The Color parameter wins over it. |
| --bit-Button-hover-background | --bit-clr-pri-hover | Background while hovered (pointer devices only). The Color parameter wins over it. |
| --bit-Button-hover-border-color | The rest border color, and the hover background for the Fill variant | Border color while hovered (pointer devices only). The Color parameter wins over it, except over the transparent border of Text. |
| --bit-Button-active-color | As the hover foreground | Foreground while pressed. The Color parameter wins over it. |
| --bit-Button-active-background | --bit-clr-pri-active | Background while pressed. The Color parameter wins over it. |
| --bit-Button-active-border-color | As the hover border color | Border color while pressed. The Color parameter wins over it, except over the transparent border of Text. |
| --bit-Button-disabled-color | --bit-clr-pri-dis-text | Foreground when disabled. It also draws the focus ring of a disabled button that AllowDisabledFocus keeps in the tab order. The Color parameter wins over it. |
| --bit-Button-disabled-background | --bit-clr-pri-dis when filled, transparent otherwise | Background when disabled. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. |
| --bit-Button-disabled-border-color | As the disabled background | Border color when disabled. The Color parameter wins over it, except over the transparent border of Text. |
| --bit-Button-focus-color | --bit-clr-pri-focus | Color of the focus ring drawn around the button on keyboard focus. The Color parameter wins over it. |
| --bit-Button-radius | --bit-shp-radius-button | Corner radius of the box, which the focus ring follows. The Rounded parameter wins over it. |
| --bit-Button-border-width | --bit-shp-brd-width | Thickness of the border on every variant. |
| --bit-Button-shadow | none | Elevation of the box, for a design system whose buttons are raised rather than flat. A Float or FloatAbsolute button is lifted by --bit-Button-float-shadow instead. |
| --bit-Button-padding | --bit-siz-ctrl-pad-y-md --bit-siz-ctrl-pad-x-md | Padding of the box. An icon-only button takes its vertical padding on all four sides instead. The Size parameter wins over it. |
| --bit-Button-min-width | --bit-siz-ctrl-min-width | Smallest width of a labeled button, for lining up a row of buttons whose labels differ in length. FullWidth and NoWrap drop it to zero unless it is set, since both size the button by its container. |
| --bit-Button-min-height | --bit-siz-ctrl-md | Smallest height of the box, and the smallest width of an icon-only one. It is a floor, not a height: the box still grows with a wrapped label or a secondary line. The Size parameter wins over it. |
| --bit-Button-gap | spacing(1) | Room between the icon and the text, and between the loading spinner and its label. The Size parameter wins over it. |
| --bit-Button-font-size | --bit-tpg-fs-sm | Size of the primary text. The Size parameter wins over it. |
| --bit-Button-secondary-font-size | --bit-tpg-fs-xs | Size of the secondary text, one ramp step below the primary text by default. The Size parameter wins over it. |
| --bit-Button-secondary-color | The button's own foreground | Color of the secondary line of text. It is not muted by default, since on a filled button the contrast of the smaller of the two lines is what a muted color spends first. |
| --bit-Button-font-weight | --bit-tpg-font-weight | Weight of both lines of text. |
| --bit-Button-text-transform | --bit-tpg-ctrl-text-transform | Casing of both lines of text. Set it to none to drop the uppercasing of the buttons alone, without touching the other controls that share the global token. |
| --bit-Button-letter-spacing | --bit-tpg-ctrl-letter-spacing | Tracking of both lines of text, which usually moves with the casing above. |
| --bit-Button-icon-size | --bit-siz-icon-md | Size of the icon, for a glyph and an IconUrl image alike. The Size parameter wins over it. |
| --bit-Button-spinner-size | --bit-siz-icon-md | Diameter of the loading spinner, the icon's size by default. The Size parameter wins over it. |
| --bit-Button-spinner-color | The button's own foreground | The spinner's moving arc. Reading the foreground by default is what keeps it legible over the filled background of one variant and the transparent one of the others. |
| --bit-Button-spinner-track-color | The button's own foreground at 25% | The ring the arc travels on. |
| --bit-Button-float-offset | 1rem | Inset of a Float or FloatAbsolute button from the edge it is pinned to. The FloatOffset parameter writes this variable on the instance. |
| --bit-Button-float-shadow | --bit-shd-card | Elevation of a Float or FloatAbsolute button, which is what lifts it off the content it sits over. The focus ring is a shadow too and replaces it while the button is focused. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitButton parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AllowDisabledFocus | bool | true | Keeps the disabled button focusable and discoverable by screen readers, rendering aria-disabled instead of the native disabled attribute when Disabled is true, preserving a consistent tab order. Set it to false to render the native disabled attribute and remove the button from the tab order. |
| AriaDescription | string? | null | Detailed description of the button for the benefit of screen readers, rendered as visually hidden text beside the button and read after its name, not as part of it. An aria-describedby written on the component by hand is kept and this description is added to it, since the attribute is a list of ids. |
| AriaHidden | bool | false | If true, adds an aria-hidden attribute instructing screen readers to ignore the button. |
| AutoFocus | bool | false | If true, the button automatically receives focus when the page renders (rendered as the autofocus attribute). |
| AutoLoading | bool | false | If true, enters the loading state automatically while awaiting the OnClick event and prevents subsequent clicks by default. The state is left even when the handler throws. |
| ButtonType | BitButtonType? | null | The type of the button element; defaults to submit inside an EditForm otherwise button. |
| ChildContent | RenderFragment? | null | The content of primary section of the button. |
| Classes | BitButtonClassStyles? | null | Custom CSS classes for different parts of the button. |
| Color | BitColor? | null | The general color of the button. An explicit value wins over the --bit-Button-* color variables (the disabled and focus colors included); left unset, the button is primary unless they say otherwise. |
| Download | string? | null | The value of the download attribute of the link rendered by the button when Href is provided. Instructs the browser to download the linked resource instead of navigating to it, using the provided value as the file name. |
| Draggable | bool | false | Makes the Float/FloatAbsolute button draggable on the page, by pointer or with the arrow keys while it has the focus; ignored when neither is set. |
| FixedColor | bool | false | Preserves the foreground color of the button through hover and focus. |
| Float | bool | false | Enables floating behavior for the button, allowing it to be positioned relative to the viewport. |
| FloatAbsolute | bool | false | Enables floating behavior for the button, allowing it to be positioned relative to its container. |
| FloatOffset | string? | null | Specifies the offset of the floating button: any CSS length (1rem, 5%, a calc()), or a bare number, which is read as pixels. |
| FloatPosition | BitPosition? | null | Specifies the position of the floating button. |
| FormId | string? | null | The id of the form element that the button is associated with (rendered as the form attribute). Allows a submit/reset button to be placed outside of its form element. |
| FullWidth | bool | false | Expand the button width to 100% of the available width. |
| Href | string? | null | The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button. |
| Icon | BitIconInfo? | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | string? | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| IconOnly | bool | false | Determines that only the icon should be rendered; the text is kept as screen-reader-only content, so the button keeps its accessible name unless an AriaLabel replaces it. |
| IconPlacement | BitPlacement? | null | Gets or sets the position of the icon relative to the component's content. The default value is Start. Only Start and End are honoured, and they follow the reading direction; any other value leaves the icon where Start would put it. |
| IconUrl | string? | null | The url of the custom icon to render inside the button. |
| IsLoading | bool | false | Determines whether the button is in loading mode or not. The spinner is stacked over the content rather than replacing it, so the box keeps its size and its accessible name, and the button reports aria-busy - plus aria-disabled unless Reclickable is set, since the click is refused. |
| LoadingDelay | int | 0 | The delay in milliseconds before the spinner appears after the button enters the loading state, so an operation that finishes inside the delay never flashes one. Only the visuals wait: the click is blocked and aria-busy is rendered as soon as the loading starts. |
| LoadingLabel | string? | null | The loading label text to show next to the spinner icon. It is also announced by assistive technologies from a live region beside the button, so that it is heard as a change of state instead of changing the name of the button itself. |
| LoadingLabelPlacement | BitPlacement | BitPlacement.End | The position of the loading Label in regards to the spinner icon. Only Top, Bottom, Start and End are honoured; any other value falls back to the default. |
| LoadingTemplate | RenderFragment? | null | The custom template used to replace the default spinner and loading label inside the button in the loading state. Like the spinner it replaces, it is hidden from assistive technologies; use LoadingLabel for what should be announced. |
| NoWrap | bool | false | Keeps each line of the button's text on a single line and ends it with an ellipsis where it does not fit. |
| OnClick | EventCallback<bool> | Raised when the button is clicked; receives a bool indicating the current loading state. | |
| PrimaryTemplate | RenderFragment? | The content of the primary section of the button (alias of the ChildContent). | |
| Reclickable | bool | false | Enables re-clicking while the button is in the loading state, which also keeps it reported and drawn as an available control instead of a busy and disabled one. |
| Rel | BitLinkRels? | null | Sets the rel attribute for link-rendered buttons when Href is a non-anchor URL; ignored for empty or hash-only hrefs. |
| Rounded | bool | false | Renders the button with fully rounded (pill shaped) corners, and an icon-only one as a circle. It wins over --bit-Button-radius, which restyles the default corner and not a rounded one. |
| SecondaryText | string? | null | The text of the secondary section of the button. |
| SecondaryTemplate | RenderFragment? | The custom template for the secondary section of the button. | |
| Size | BitSize? | null | Sets the preset size for typography and padding of the button. An explicit value wins over the --bit-Button-* size variables (padding, min-height, gap, font, icon and spinner sizes); left unset, the button is medium unless they say otherwise. |
| StopPropagation | bool | false | If true, stops the click event from bubbling up to the parent elements. |
| Styles | BitButtonClassStyles? | null | Custom inline styles for different parts of the button. |
| Target | string? | null | Specifies target attribute of the link when the button renders as an anchor (by providing the Href parameter). When set to _blank and no opener-related Rel is provided, noopener is added to the rel automatically for security. |
| Title | string? | null | The tooltip to show when the mouse is placed on the button. |
| Variant | BitVariant? | null | The visual variant of the button. |
BitButton public members
| Name | Type | Default value | Description |
|---|---|---|---|
| FocusAsync | ValueTask | Gives focus to the root element of the button. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitVariant enum
| Name | Value | Description |
|---|---|---|
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
BitLinkRels enum
| Name | Value | Description |
|---|---|---|
| Alternate | 1 | Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror) |
| Author | 2 | Provides a link to the author of the document. |
| Bookmark | 4 | Permanent URL used for bookmarking. |
| External | 8 | Indicates that the referenced document is not part of the same site as the current document. |
| Help | 16 | Provides a link to a help document. |
| License | 32 | Provides a link to licensing information for the document. |
| Next | 64 | Provides a link to the next document in the series. |
| NoFollow | 128 | Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link) |
| NoOpener | 256 | Requires that any browsing context created by following the hyperlink must not have an opener browsing context. |
| NoReferrer | 512 | Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink. |
| Prev | 1024 | The previous document in a selection. |
| Search | 2048 | Links to a search tool for the document. |
| Tag | 4096 | A tag (keyword) for the current document. |
| Me | 8192 | Indicates that the linked document represents the person who owns the current content. (used for identity verification) |
| Opener | 16384 | Requires that any browsing context created by following the hyperlink keeps its opener browsing context. (reverses the implicit noopener modern browsers apply to _blank targets) |
| PrivacyPolicy | 32768 | Links to the privacy policy that applies to the current document. (rendered as privacy-policy) |
| Sponsored | 65536 | Marks the link as an advertisement or paid placement, so search engines do not count it as an organic endorsement. |
| TermsOfService | 131072 | Links to the terms of service that apply to the current document. (rendered as terms-of-service) |
| Ugc | 262144 | Marks the link as user-generated content, like forum posts or comments, for search engines. |
BitPosition enum
| Name | Value | Description |
|---|---|---|
| TopLeft | 0 | The top left corner, in both reading directions. |
| TopCenter | 1 | The top edge, centered horizontally. |
| TopRight | 2 | The top right corner, in both reading directions. |
| TopStart | 3 | The top edge, on the side the reading direction starts from. |
| TopEnd | 4 | The top edge, on the side the reading direction ends at. |
| CenterLeft | 5 | The left edge, centered vertically, in both reading directions. |
| Center | 6 | Centered both ways. |
| CenterRight | 7 | The right edge, centered vertically, in both reading directions. |
| CenterStart | 8 | Centered vertically, on the side the reading direction starts from. |
| CenterEnd | 9 | Centered vertically, on the side the reading direction ends at. |
| BottomLeft | 10 | The bottom left corner, in both reading directions. |
| BottomCenter | 11 | The bottom edge, centered horizontally. |
| BottomRight | 12 | The bottom right corner, in both reading directions. |
| BottomStart | 13 | The bottom edge, on the side the reading direction starts from. |
| BottomEnd | 14 | The bottom edge, on the side the reading direction ends at. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.