Chakra-UI

I♥️Components

Divider

|

Chakra Docs

|

⦾ When designing a user interface, it's often necessary to create a clear distinction between different sections of content. This is where the Divider component in Chakra UI comes into play.

The Divider component is a simple yet effective tool that allows you to visually separate content within a list or a group. Essentially, it displays a thin line that separates different parts of your interface, providing a visual cue to users that different content areas are distinct. This can greatly enhance the user experience by ensuring that your interface is easy to navigate and understand.

The Divider component can be imported as follows:

Examples

Basic Usage

⦾ The basic use of a Divider is quite straightforward. It can be inserted wherever you want a division in your content. You can see the default margin settings for the Divider component in this example. Note: theDivider component is a self-closing tag.

I represent content that comes before the divider.

I represent content that comes after the divider.

Code

Orientation

⦾ By default, the Divider is horizontal. However, Chakra UI provides you the flexibility to change its orientation to vertical. This can be achieved by passing the orientation prop. Note that when using a vertical divider, it's necessary to assign a height to the parent element.

A Wonderful Heading

Some fantastic content on the right side of the vertical divider. This content should not be ignored in spite of the divider showing off over there to the left.

Code

The Dashed Variant

⦾ The Divider component in Chakra UI also has a variant called "dashed". This variant displays the divider as a dashed line, rather than the default solid line. It can be particularly useful when you want to make the separation between sections of content more subtle, or for stylistic preferences. To use the "dashed" variant of the Divider, you simply pass the string "dashed" to the variant prop of the Divider component. The dashed variant creates a visually distinct boundary, but due to its dashed nature, does so in a less imposing way than a solid line might. This can be helpful for visually separating content without drawing too much attention to the divider line itself.
As above...
So below...

Code

Adding Content within a Divider

⦾ In some scenarios, you might need to display content within a divider. Chakra UI enables this by composing theDivider and Center components. This can be achieved by wrapping the content within the Divider component. In this example, theCenter component is used to place text directly in the middle of the divider.

This is some content before the Divider

Divider Text

This is some content after the Divider

Code

Composing with Other Components

⦾ The Divider component can be efficiently used in conjunction with other components. For example, you can pair it with the Text and Stack components. Here, the Divider creates a visual boundary on the left of the text.

In this example, a Stack component serves to layout a row of items ("Item 1", "Item 2", etc.). Each item is separated by a Divider with the orientation set to 'vertical'. This is useful in cases where you want to display a list of items horizontally and need a visual element to clearly distinguish between each item. TheDivider serves as that distinguishing element.

Item 1

Item 2

Item 3

Code

Did you know?

Creative Idea No. 1

Decorative Divider: Dividers are not only functional elements used to separate content. But they can also serve as decorative elements, enhancing the aesthetic of your layout. Here's how you can use a divider to create a decorative horizontal line that adds a bit of flair to your UI. This example uses a custom-styled divider with a blue background color and a specified height, acting as a decorative line.

Pre-Divider Content

Post-Divider Content

Code

Creative Idea No. 2

Spacer in a Form: Dividers can also be useful in form design, providing a clear visual distinction between groups of related fields. This can make it easier for users to understand and interact with your form. In this example, the divider separates the 'Username' and 'Password' input fields, making it easier for users to mentally group related fields and process the form's structure.

Code

Creative Idea No. 3

Section Titles: A Divider can be coupled with a Text component to serve as a section title, giving it a "highlighted" feel while providing a clear distinction from the rest of the content. In this example, the Divider is positioned absolutely at the bottom of the 'Section Title' heading, serving as an underline. This can help highlight section titles and visually separate them from the rest of the content.

Some Snazzy Title

Some snazzy content about how awesome it would be if unicorns were real, especially miniature ones that we could all have as pets if we wanted.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.