Divider

Demo

<Flex direction="column">
  <Text>Before</Text>
  <Divider
    orientation="horizontal" />
  <Text>After</Text>
</Flex>

Usage

Import the Divider component and place it between components you want separated. Most of the time you will want to use the divider in a <Flex> component.

import { Flex, Text, Divider } from '@aws-amplify/ui-react';

export const DefaultDividerExample = () => (
  <Flex direction="column">
    <Text>Before</Text>
    <Divider />
    <Text>After</Text>
  </Flex>
);

Orientation

Horizontal (default)

import { Flex, Text, Divider } from '@aws-amplify/ui-react';

export const HorizontalDividerExample = () => (
  <Flex direction="column">
    <Text>Before</Text>
    <Divider orientation="horizontal" />
    <Text>After</Text>
  </Flex>
);

Vertical

import { Flex, Text, Divider } from '@aws-amplify/ui-react';

export const VerticalDividerExample = () => (
  <Flex direction="row" justifyContent="space-around">
    <Text>Before</Text>
    <Divider orientation="vertical" />
    <Text>After</Text>
  </Flex>
);

Sizes

Available options are small, large, and none (default).

import { Flex, Divider } from '@aws-amplify/ui-react';

export const DividerSizesExample = () => (
  <Flex direction="column">
    <Divider size="small" />
    <Divider />
    <Divider size="large" />
  </Flex>
);

Label

import { Flex, Text, Divider } from '@aws-amplify/ui-react';

export const LabelExample = () => (
  <Flex direction="column">
    <Text>Before</Text>
    <Divider label="OR" />
    <Text>After</Text>
  </Flex>
);

Customization

Theme

You can customize the appearance of all Divider components in your application with a Theme.

import { Divider, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'divider-theme',
  tokens: {
    components: {
      divider: {
        borderStyle: { value: 'dotted' },
        borderColor: { value: '{colors.blue.80}' },
        borderWidth: { value: '{borderWidths.small}' },

        label: {
          color: { value: '{colors.white}' },
          backgroundColor: { value: '{colors.blue.80}' },
        },

        large: {
          borderWidth: { value: '{borderWidths.large}' },
        },
      },
    },
  },
};

export const DividerThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex direction="column" gap="3rem">
      <Divider label="Default" />
      <Divider size="large" label="Large" />
    </Flex>
  </ThemeProvider>
);

CSS

You can set the Amplify CSS variables or use the built-in .amplify-divider class to customize all Dividers in your application as well.

/* styles.css */
[data-amplify-theme] {
  --amplify-components-divider-border-style: dashed;
}
/* OR */
.amplify-divider {
  border-style: dashed;
}

To replace all the Divider styling, unset it:

.amplify-divider {
  all: unset;
  /* Add your styling here*/
}

Target classes

Local styling

To override styling on a specific Divider, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

Using a class selector:

import { Flex, Divider } from '@aws-amplify/ui-react';

const css = `.custom-divider {
  border-style: dashed;
}`;

export const DividerClassNameExample = () => (
  <Flex direction="column">
    <style>{css}</style>
    <Divider className="custom-divider" />
  </Flex>
);

Using style props:

import { Flex, Divider, useTheme } from '@aws-amplify/ui-react';

export const DividerStylePropsExample = () => {
  const { tokens } = useTheme();
  return (
    <Flex direction="column">
      <Divider
        border={`${tokens.borderWidths.large} solid ${tokens.colors.primary[80]}`}
      />
      <Divider border="5px solid pink" borderRadius="10px" />
    </Flex>
  );
};

Default theme

import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';

type DividerSizeTokens<Output> = DesignTokenProperties<'borderWidth', Output>;

export type DividerTokens<Output extends OutputVariantKey> =
  DesignTokenProperties<
    'borderStyle' | 'borderColor' | 'borderWidth' | 'opacity',
    Output
  > & {
    label?: DesignTokenProperties<
      'color' | 'paddingInline' | 'fontSize' | 'backgroundColor',
      Output
    >;
    small?: DividerSizeTokens<Output>;
    large?: DividerSizeTokens<Output>;
  };

export const divider: Required<DividerTokens<'default'>> = {
  borderStyle: { value: 'solid' },
  borderColor: { value: '{colors.border.primary.value}' },
  borderWidth: { value: '{borderWidths.medium.value}' },

  label: {
    color: { value: '{colors.font.tertiary.value}' },
    paddingInline: { value: '{space.medium.value}' },
    fontSize: { value: '{fontSizes.small.value}' },
    backgroundColor: { value: '{colors.background.primary.value}' },
  },

  small: {
    borderWidth: { value: '{borderWidths.small.value}' },
  },

  large: {
    borderWidth: { value: '{borderWidths.large.value}' },
  },

  opacity: {
    value: '{opacities.60.value}',
  },
};