lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The divider component is used to visually separate content into distinct sections. It can be used to separate a group of related items or to indicate a change in content or context. The divider should be used to separate content, not to create visual emphasis.

Example

some text content

some text content

code
<script type="module">
  import '@blueprintui/components/include/divider.js';
</script>

<div bp-layout="block gap:sm">
  <p bp-text="content">some text content</p>
  <bp-divider></bp-divider>
  <p bp-text="content">some text content</p>
</div>

Vertical

buttonbuttonbutton
code
<script type="module">
  import '@blueprintui/components/include/divider.js';
  import '@blueprintui/components/include/button.js';
</script>

<div bp-layout="inline gap:md align:vertical-center p-x:md">
  <bp-button size="sm" action="secondary">button</bp-button>
  <bp-divider orientation="vertical"></bp-divider>
  <bp-button size="sm" action="secondary">button</bp-button>
  <bp-divider orientation="vertical"></bp-divider>
  <bp-button size="sm" action="secondary">button</bp-button>
  <bp-divider orientation="vertical"></bp-divider>
</div>

Install

NPM

// npm package
import '@blueprintui/components/include/divider.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/divider.js/+esm';
</script>

Accessibility

  • Avoid using divider as the only way to indicate a change in content or context.

bp-divider

Properties

NameTypesDescription
orientation'horizontal' | 'vertical'
rolestring
ariaOrientationstring

Attributes

NameTypesDescription
orientation'horizontal' | 'vertical'

CSS Properties

NameTypesDescription
--background
--size