Divider

Divider

The Divider component provides a visual separation between sections of content. It helps organize related content and makes the structure of an interface easier to understand.

import Button from "rocksolidjs/Button";
import Card from "rocksolidjs/Card";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Divider from "rocksolidjs/Divider";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Card class="w-full max-w-sm" variant="outlined">
      <CardContent>
        <Typography variant="h5">Upgrade your plan</Typography>
        <Typography variant="body2" class="text-muted-foreground mt-1">
          Get more storage and advanced features.
        </Typography>
      </CardContent>

      <Divider aria-hidden />

      <CardFooter class="justify-end">
        <Button variant="ghost">Not now</Button>
        <Button color="success">Upgrade</Button>
      </CardFooter>
    </Card>
  );
}

Examples

Vertical Divider

Use a vertical Divider to separate elements in a horizontal layout.

import Button from "rocksolidjs/Button";
import Divider from "rocksolidjs/Divider";

export default function Example() {
  return (
    <div class="flex items-center rounded-lg border border-neutral-200 dark:border-neutral-800">
      <Button variant="ghost" class="rounded-none rounded-tl-[inherit] rounded-bl-[inherit]">Edit</Button>
      <Divider aria-hidden orientation="vertical" />
      <Button variant="ghost" class="rounded-none">Duplicate</Button>
      <Divider aria-hidden orientation="vertical" />
      <Button variant="ghost" class="rounded-none rounded-tr-[inherit] rounded-br-[inherit]">Delete</Button>
    </div>
  );
}

When using a vertical Divider, make sure its parent container has an appropriate height so that the divider is visible.

Custom Styling

Use the class prop to change properties such as color, spacing, thickness, or size.

import Divider from "rocksolidjs/Divider";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="w-full max-w-sm text-center">
      <Typography variant="body1">Account</Typography>
      <Divider aria-hidden class="my-2 border-4 rounded-full" />
      <Typography variant="body1">Preferences</Typography>
    </div>
  );
}

Accessibility

  • Use the Divider to visually and semantically separate sections of content.
  • For purely decorative dividers that do not convey meaningful structure, use aria-hidden="true" so they are ignored by assistive technologies.
  • Do not rely on the Divider alone to communicate important information.

API

Divider

The Divider component supports custom HTML elements, horizontal or vertical orientations, and custom CSS classes.

Prop Type Required Default Description
as string No "div" The HTML element used to render the Divider.
class string No — Additional CSS classes applied to the Divider.
orientation "horizontal" | "vertical" No "horizontal" Controls the direction of the Divider.
  • Card — Use Card to group related content into a distinct container.