import { Meta, ArgTypes } from '@storybook/addon-docs/blocks'; import { Divider } from './Divider';

Divider

Usage

When to use

When creating separation between large sections of page content or smaller parts of components like in the page info section of the header.

When not to use

Dividers should be used sparingly.

Don’t use dividers when white space (padding / margins) is sufficient to separate out sections. When sections are related to each other, they may not need dividers (ex: filtering / search related to a table).

Variants

Horizontal

tsx

import { Divider } from '@grafana/ui';

    <header>
        <h1>My title here</h1>
        
    </header>
    <Divider />
    <main>
        <p>Main content goes here</p>
    </main>

Vertical

tsx

import { Divider } from '@grafana/ui';

    <header>
        <h1>My title here</h1>
        <Divider direction="vertical" />
        
    </header>
    <main>
        <p>Main content goes here</p>
    </main>

Modifiers

Pass a spacing token into the spacing prop to adjust the margin.

tsx

import { Divider } from '@grafana/ui';

    <header>
        <h1>My title here</h1>
        <Divider direction="vertical" spacing={0.5}/>
        
    </header>
    <main>
        <p>Main content goes here</p>
    </main>

Dos

- Import and add the Divider component inside the code where you would normally add an hr or a div.

Don'ts

- Do not modify the color of the divider

Props