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="sm" />
      <Flex flexDirection="row" gap="sm">
        <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="sm">
      <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="sm">
      <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.

Name	Type
asChild	`false \| true`
decorative	`false \| true` 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.
orientation	`ResponsiveValue<"horizontal" \| "vertical">` = `"horizontal"`

Name

Type

asChild

false | true

decorative

false | true

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.

orientation

ResponsiveValue<"horizontal" | "vertical"> = "horizontal"

#
Changelog

#
0.1.0

Added component

Indicator Checkbox