# Separator
**Also known as:** Divider
## Description
BitSeparator splits content into groups with a horizontal or vertical line. Content given to it - a label, an icon - sits between the two segments of the line, so it reads on any surface, and names the separator to screen readers. It is restyled through its parameters, its public CSS variables or a BitParams cascade.
## Notes
A separator is announced by screen readers, so mark a purely visual one Decorative. Its content is presentational: keep links and buttons out of it. Between the items of a list or a menu, render it as one with Element='li', and mark it Decorative in a plain list, which owns nothing but items.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AlignContent | `BitPlacement?` | null | Where the content should be aligned along the line of the separator. Only Start, Center and End are honoured; any other value, or none, centers the content. |
| AutoSize | `bool` | false | Renders the separator with auto width or height, sizing it to its content instead of its container or the flex row it stands in. |
| Background | `BitColorKind?` | null | The color kind of the background behind the content of the separator. Defaults to transparent. |
| Border | `BitColorKind?` | null | The color kind of the line of the separator, out of the neutral border tiers of the theme. |
| ChildContent | `RenderFragment?` | null | The content of the Separator, it can be any custom tag or text. It sits between the two segments of the line and also names the separator to assistive technologies, so nothing focusable belongs in it. |
| Classes | `BitSeparatorClassStyles?` | null | Custom CSS classes for different parts of the separator. |
| Color | `BitColor?` | null | The general color of the line of the separator, painting it in one of the roles of the theme. Wins over Border. |
| ContentOffset | `string?` | null | The offset of the content from the edge of the line it is aligned to, as any CSS length, where a percentage measures against the length of the separator. Only takes effect while AlignContent is Start or End. |
| Decorative | `bool` | false | Removes the separator from the accessibility tree, for a separator that is purely visual and should not be announced. Its content, if any, is then read as plain text. |
| Element | `string?` | null | The custom html element used for the root node, such as "li" between the items of a list or a menu. A tag that cannot hold content falls back to the default "div". |
| Inset | `string?` | null | Holds the separator off the ends of its container: one CSS length for both ends, or two for the start and the end. |
| LineStyle | `BitLineStyle?` | null | The style the line of the separator is drawn in: solid, dashed, dotted or double. |
| Size | `BitSize?` | null | The size of the line of the separator, out of the sizes of the theme. Thickness wins over it. |
| Styles | `BitSeparatorClassStyles?` | null | Custom CSS styles for different parts of the separator. |
| Thickness | `string?` | null | The thickness of the line of the separator, as any CSS length. Defaults to the weight of the current Size, which starts at the theme's divider hairline. |
| Vertical | `bool` | false | Whether the element is a vertical separator. It stretches to the height of the flex row it stands in and takes it from its container anywhere else, but is never shorter than a line of text. |
| 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. An attribute written on the component wins over an entry of the same name. |
| 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. |
## 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. |
## Enums
### 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. |
### BitLineStyle Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Solid | 0 | A continuous line, which is what a line is drawn as unless something says otherwise. |
| Dashed | 1 | A line of short dashes, which usually marks the stretch it spans as pending or estimated. |
| Dotted | 2 | A line of dots, a lighter version of the dashed line. |
| Double | 3 | Two parallel lines with a gap between them, which needs a line of at least three pixels to have room to be drawn. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### 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. |
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### 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. |
## Sub Classes
### BitSeparatorClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the separator. |
| Content | `string?` | null | Custom CSS classes/styles for the element wrapping the ChildContent of the separator, which is only rendered while the separator has content. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Separator-color` | --bit-clr-brd-sec | Color of the line. The Color and Border parameters win over it. |
| `--bit-Separator-thickness` | --bit-siz-divider | Weight of the line. The Size and Thickness parameters win over it. |
| `--bit-Separator-line-style` | solid | Style of the line, as any CSS border style. The LineStyle parameter wins over it. |
| `--bit-Separator-spacing` | spacing(0.5) | Room on either side of the line, across it: above and below a horizontal separator, beside a vertical one. |
| `--bit-Separator-inset` | 0 | Room held off both ends of the line, or off the start and the end given two lengths. The Inset parameter wins over it. |
| `--bit-Separator-content-gap` | spacing(1.5) | Room between the content and the line on either side of it. |
| `--bit-Separator-content-offset` | 0 | Length of the segment before a start- or end-aligned content. The ContentOffset parameter wins over it. |
| `--bit-Separator-content-color` | --bit-clr-fg-pri | Text color of the content. |
| `--bit-Separator-content-background` | transparent | Background of the content. The Background parameter wins over it. |
| `--bit-Separator-content-font-size` | inherit | Text size of the content. |
| `--bit-Separator-content-font-weight` | inherit | Text weight of the content. |
## Examples
\n**Basic**:
```razor
Text
Disabled
```
\n**Vertical**:
```razor
Start
Center
End
Start, 2rem
End, 10%
Start
Center
End
25%
```
\n**Length**:
```razor
Full length
Inset 2rem
Inset 25% at the start
Solid
Dashed
Dotted, 3px
Double, 4px
Solid, 0.5rem
Named by its content
Read as plain text
```
\n**Lists & menus**:
```razor
Account
Billing
Danger zone
```
```csharp
private readonly BitSeparatorParams[] separatorParams =
[
new()
{
Thickness = "2px",
LineStyle = BitLineStyle.Dashed,
AlignContent = BitPlacement.Start,
}
];
```
\n**Color**:
```razor
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
Primary border
Secondary border
Tertiary border
Transparent border
Primary background
Secondary background
Tertiary background
Transparent background
```
\n**Size**:
```razor
Small
Medium
Large
Styled
Classed
Styles
Classes
```
\n**RTL**:
```razor
جداکننده
ابتدا
انتها
```
Item 1
Sign in with a password
OR
Sign in with a passkey
Docs
```
\n**Content alignment**:
```razor
Item 1
```
\n**Line**:
```razor
Item 1
```
\n**Accessibility**:
```razor
Small
```
\n**Style & Class**:
```razor