Amplify UI

Divider

Divider helps organize content, separate sections and establish visual rhythm.

Demo

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.

Before


After

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)

Before


After

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

Before


After

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

Before


After

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.

Divider Theme Source



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

ClassDescription
amplify-dividerTop level element that wraps the Divider primitive
amplify-divider--labelClass applied to the label of the Divider component
  • --amplify-components-divider-border-color
  • --amplify-components-divider-border-style
  • --amplify-components-divider-border-width
  • --amplify-components-divider-label-background-color
  • --amplify-components-divider-label-color
  • --amplify-components-divider-label-font-size
  • --amplify-components-divider-label-padding-inline
  • --amplify-components-divider-large-border-width
  • --amplify-components-divider-opacity
  • --amplify-components-divider-small-border-width

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}',
  },
};

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.