Thumbprint logo

Horizontal Rule

Dividers that separate sections of content

HorizontalRule line styles

Basic

<HorizontalRule />

Dotted
<HorizontalRule lineStyle="dotted" />

Dashed
<HorizontalRule lineStyle="dashed" />

Colors
HorizontalRule default to Thumbtack's gray color. You can use gray-300 instead by setting the color prop.
<>
  <HorizontalRule />
  <HorizontalRule color="gray-300" />
</>

Props
HorizontalRule
  • lineStyle
    Controls the style of the line rendered for the horizontal rule.
    

    Type
    'solid' | 'dotted' | 'dashed'
    Default
    'solid'
  • color
    Controls the color of the line rendered for the horizontal rule.
    

    Type
    'gray' | 'gray-300'
    Default
    'gray'