HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Divider

A thin line that visually separates groups of related content, horizontally or vertically.

Above
Below

Overview

Dividers are visual elements used to separate and organize related content within an interface. They can be oriented horizontally or vertically to create clear distinctions between different sections, groups, or categories of information. Dividers help establish visual hierarchy and improve content scannability by providing clear boundaries between related elements. Vertical dividers can be used within toolbars to separate sections of icons.

Usage

forge-divider draws a thin separating line through a single vertical attribute — horizontal by default. Reach for it when content is complex enough that a visible line reads more clearly than whitespace alone; for simpler groupings, like a few related form fields, prefer spacing over a divider.

Rules

Do
Use a divider when content is complex enough that a visible separator reads more clearly than whitespace.Prefer whitespace over a divider for simpler groupings, like a handful of related form fields.Use a vertical divider inside a toolbar to separate clusters of icons or actions.
Don't
Don't add a divider between every single element — reserve it for real section boundaries.Don't use a divider as a substitute for consistent spacing throughout a layout.

Basic usage

A horizontal line is the default — use it to separate stacked content.

A horizontal divider separating stacked content.

Vertical

Set vertical for a divider that separates inline items side by side instead of stacked ones.

A vertical divider separating two inline items.

Dividers are used to separate elements with a thin line, either vertically or horizontally.

import "@tylertech/forge/divider";
Properties
PropertyAttributeTypeDefaultDescription
verticalverticalbooleanfalseControls if the divider is displayed vertically or horizontally.
CSS Parts
NameDescription
::part(root)The root container element.
CSS Custom Properties
NameDescription
--forge-divider-colorThe color of the divider.
--forge-divider-widthThe width of the divider.
--forge-divider-border-styleThe border-style (dashed, solid) of the divider.
--forge-divider-marginThe margin of divider.

Screen reader behavior

forge-divider automatically applies role="separator". If the divider is purely decorative in a given context and shouldn’t be announced at all, add aria-hidden="true" to remove it from the accessibility tree.

Loading Forge chat…