Divider

Status: Stable

Latest released: January 2020

Current version: v1.3.0

Storybook
GitHub

Dividers should be used sparingly. A few areas where dividers can be helpful include: separating complex blocks of content (i.e., product comparison), connecting interactive selections (i.e., accordion, left/right nav).

  • Consistent space is a great alternative to using dividers
  • A hierarchy of dividers provides a visual cue when rows are being compared in a table or nav structure
  • Engineers can use the .border base-styles rule directly in place of <Divider> (see usage notes below)

Variants

Level 1


Level 2 (default)


Level 3


Development

import Divider from '@nerdwallet/react-divider';
<Divider />;

Props

<Divider>

className

string

Default

null

level

1 | 2 | 3 | '1' | '2' | '3'

Levels of lightness. 3 is the lightest which maps to the design token from the design system, "neutral-lightest".

Default

'2'