Divider
<sl-divider> | SlDivider
Dividers are used to visually separate or group elements.
<sl-divider></sl-divider>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => <SlDivider />;
Examples
Width
Use the --width
custom property to change the width of the divider.
<sl-divider style="--width: 4px;"></sl-divider>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => <SlDivider style={{ '--width': '4px' }} />;
Color
Use the --color
custom property to change the color of the divider.
<sl-divider style="--color: tomato;"></sl-divider>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
Spacing
Use the --spacing
custom property to change the amount of space between the divider and it’s
neighboring elements.
<div style="text-align: center;"> Above <sl-divider style="--spacing: 2rem;"></sl-divider> Below </div>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ( <> Above <SlDivider style={{ '--spacing': '2rem' }} /> Below </> );
Vertical
Add the vertical
attribute to draw the divider in a vertical orientation. The divider will span
the full height of its container. Vertical dividers work especially well inside of a flex container.
<div style="display: flex; align-items: center; height: 2rem;"> First <sl-divider vertical></sl-divider> Middle <sl-divider vertical></sl-divider> Last </div>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ( <div style={{ display: 'flex', alignItems: 'center', height: '2rem' }} > First <SlDivider vertical /> Middle <SlDivider vertical /> Last </div> );
Menu Dividers
Use dividers in menus to visually group menu items.
<sl-menu style="max-width: 200px;"> <sl-menu-item value="1">Option 1</sl-menu-item> <sl-menu-item value="2">Option 2</sl-menu-item> <sl-menu-item value="3">Option 3</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="4">Option 4</sl-menu-item> <sl-menu-item value="5">Option 5</sl-menu-item> <sl-menu-item value="6">Option 6</sl-menu-item> </sl-menu>
import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( <SlMenu style={{ maxWidth: '200px' }}> <SlMenuItem value="1">Option 1</SlMenuItem> <SlMenuItem value="2">Option 2</SlMenuItem> <SlMenuItem value="3">Option 3</SlMenuItem> <sl-divider /> <SlMenuItem value="4">Option 4</SlMenuItem> <SlMenuItem value="5">Option 5</SlMenuItem> <SlMenuItem value="6">Option 6</SlMenuItem> </SlMenu> );
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.0/cdn/components/divider/divider.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.0/cdn/components/divider/divider.js';
To import this component using a bundler:
import '@shoelace-style/shoelace/dist/components/divider/divider.js';
To import this component as a React component:
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
vertical
|
Draws the divider in a vertical orientation. |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Custom Properties
Name | Description | Default |
---|---|---|
--color |
The color of the divider. | |
--width |
The width of the divider. | |
--spacing |
The spacing of the divider. |
Learn more about customizing CSS custom properties.