# Divider

## Examples


### StyledContainer

```typescript
import React from 'react';

import styled from 'styled-components';

import Divider from '@splunk/react-ui/Divider';
import Paragraph from '@splunk/react-ui/Paragraph';
import { variables } from '@splunk/themes';

const StyledContainer = styled.div`
    width: 400px;

    * + * {
        margin-block-start: ${variables.spacingMedium};
    }
`;


function Basic() {
    return (
        <StyledContainer>
            <Paragraph>
                This is the first paragraph. It demonstrates how content can be separated using a
                divider component.
            </Paragraph>
            <Divider />
            <Paragraph>
                The divider provides a clear visual break between sections of related content.
            </Paragraph>
        </StyledContainer>
    );
}

export default Basic;
```



### StyledDivider

```typescript
import React from 'react';

import styled from 'styled-components';

import Divider from '@splunk/react-ui/Divider';
import Paragraph from '@splunk/react-ui/Paragraph';
import { variables } from '@splunk/themes';

const StyledDivider = styled(Divider)`
    margin: 0 ${variables.spacingMedium};
`;

const StyledContainer = styled.div`
    display: flex;
    flex-direction: row;
`;

const StyledParagraph = styled(Paragraph)`
    margin: 0;
`;


function Vertical() {
    return (
        <StyledContainer>
            <StyledParagraph>First section</StyledParagraph>
            <StyledDivider orientation="vertical" />
            <StyledParagraph>Second section</StyledParagraph>
        </StyledContainer>
    );
}

export default Vertical;
```



### Vertical with align-items

```typescript
import React from 'react';

import styled from 'styled-components';

import Portrait from '@splunk/react-icons/Portrait';
import QuestionCircle from '@splunk/react-icons/QuestionCircle';
import Button from '@splunk/react-ui/Button';
import Divider from '@splunk/react-ui/Divider';
import Layout from '@splunk/react-ui/Layout';

const StyledDivider = styled(Divider)`
    align-self: stretch;
`;


function VerticalWithAlignItems() {
    return (
        <Layout>
            <Button icon={<QuestionCircle />} />
            <StyledDivider orientation="vertical" />
            <Button icon={<Portrait />} />
        </Layout>
    );
}

export default VerticalWithAlignItems;
```



### StyledContainer

```typescript
import React from 'react';

import styled from 'styled-components';

import Divider from '@splunk/react-ui/Divider';
import Paragraph from '@splunk/react-ui/Paragraph';

const StyledContainer = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 400px;
`;


function Appearance() {
    return (
        <StyledContainer>
            <Paragraph>Default</Paragraph>
            <Divider />
            <Paragraph>Strong</Paragraph>
            <Divider appearance="strong" />
            <Paragraph>Weak</Paragraph>
            <Divider appearance="weak" />
        </StyledContainer>
    );
}

export default Appearance;
```



### StyledContainer

```typescript
import React from 'react';

import styled from 'styled-components';

import Divider from '@splunk/react-ui/Divider';
import Paragraph from '@splunk/react-ui/Paragraph';
import { variables } from '@splunk/themes';

const StyledContainer = styled.div`
    width: 400px;

    * + * {
        margin-block-start: ${variables.spacingMedium};
    }
`;

const StyledDivider = styled(Divider)`
    border-color: ${variables.contentColorMuted};
`;


function CustomStyle() {
    return (
        <StyledContainer>
            <Paragraph>
                This is a paragraph above a custom-styled divider. You can change the divider color
                and style to match your theme.
            </Paragraph>
            <StyledDivider />
            <Paragraph>This is a paragraph below a custom-styled divider.</Paragraph>
        </StyledContainer>
    );
}

export default CustomStyle;
```



### StyledContainer

```typescript
import React from 'react';

import styled from 'styled-components';

import Divider from '@splunk/react-ui/Divider';
import Heading from '@splunk/react-ui/Heading';
import Paragraph from '@splunk/react-ui/Paragraph';

const StyledContainer = styled.div`
    width: 400px;
`;


function Decorative() {
    return (
        <StyledContainer>
            <Heading level={4}>Heading level</Heading>
            <Divider decorative />
            <Paragraph>
                This paragraph follows a decorative divider. Use the decorative prop when the
                divider is only for visual separation and not for semantic structure.
            </Paragraph>
        </StyledContainer>
    );
}

export default Decorative;
```




## API


### Divider API

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| appearance | 'default' \| 'weak' \| 'strong' | no | 'default' | Changes the border color of the `Divider`. `Divider`s with `appearance="weak"` will not meet accessibility requirements to be perceivable. If the component should be perceivable, consider the other contrast compliant `appearance` values. Otherwise, apply the `decorative` prop. |
| decorative | boolean | no | false | Remove semantics of the divider. |
| elementRef | React.Ref<HTMLHRElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| orientation | 'horizontal' \| 'vertical' | no | 'horizontal' | Sets the orientation of this `Divider`. |