Thumbprint logo

Components

Horizontal Rule

Dividers that separate sections of content.

Version:14.18.2 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { HorizontalRule } from '@thumbtack/thumbprint-react';

HorizontalRule line styles

Basic

Dotted
Dashed
Colors
HorizontalRule default to Thumbtack’s gray color. You can use gray-300 instead by setting the color prop.
Props
HorizontalRule
  • lineStyle
    Controls the style of the line rendered for the horizontal rule.
    Type
    This prop can be one of the following 3 types:
    • 'solid'
    • 'dotted'
    • 'dashed'
    Default
    'solid'
  • color
    Controls the color of the line rendered for the horizontal rule.
    Type
    This prop can be one of the following 2 types:
    • 'gray'
    • 'gray-300'
    Default
    'gray'