Skip to content

Divider

Status: Stable

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)

Examples

Level 1


Level 2 (default)


Level 3


Development

<Divider> is implemented with two .border rules from @nerdwallet/base-styles     . Engineers can use these directly such as in the case of a Table. For example, an engineer could simulate <Divider level={1} /> with

.border-top-1;
.border-neutral-dark;

Props

<Divider>

className

Deprecated
string

level

1 | 2 | 3 | "1" | "2" | "3"

style

CSSProperties

ref

(instance: any) => void | RefObject<any>