Separator

Separator component is used to visually separate items in a list or group. By default the orientation is set to horizontal.

#
Documentation

#
Usage

Axiom

Optimizely Design System

Installation

Design

Components


import { Box, Flex, Separator, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box>
      <Text fontWeight="600">Axiom</Text>
      <Text>Optimizely Design System</Text>
      <Separator my="12" />
      <Flex flexDirection="row" gap="12">
        <Text>Installation</Text>
        <Separator orientation="vertical" />
        <Text>Design</Text>
        <Separator orientation="vertical" />
        <Text>Components</Text>
      </Flex>
    </Box>
  );
}

#
Orientation

Use orientation="vertical" to display a vertical separator.

Item A

Item B

Item C


import { Flex, Separator, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" gap="12">
      <Text>Item A</Text>
      <Separator orientation="vertical" />
      <Text>Item B</Text>
      <Separator orientation="vertical" />
      <Text>Item C</Text>
    </Flex>
  );
}

#
Responsive

You can also use object or array prop notation to change orientation at various responsive breakpoints.

Resize the canvas to see the orientation change:


import { Flex, Separator, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection={["column", "row"]} gap="12">
      <Text>This is item A</Text>
      <Separator orientation={["horizontal", "vertical"]} />
      <Text>This is item B</Text>
      <Separator orientation={["horizontal", "vertical"]} />
      <Text>This is item C</Text>
    </Flex>
  );
}

#
Props

#
Separator

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`decorative` Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. `false \| true`
`orientation` `ResponsiveValue<"horizontal" \| "vertical">` Default: `horizontal`

#
Changelog

#
0.1.0

Added component