# Component/Divider

> Props: component-divider.props.txt

## Examples


### Base

```tsx
{
  args: {
    direction: 'horizontal'
  },
  render: args => {
    const argStyle = {
      horizontal: 40,
      vertical: 80
    };
    return <Stack direction='column' gap={12}>
        {(['small', 'medium'] as Array<DividerSize>).map(size => {
        return <Stack direction='column' height={args.direction ? argStyle[args.direction] : 0} key={size} gap={8}>
              <BaseText>size: {size}</BaseText>
              <Divider {...args} size={size} />
            </Stack>;
      })}
      </Stack>;
  }
}
```

### Horizontal Spacing

```tsx
{
  args: {
    direction: 'horizontal'
  },
  render: args => {
    const argStyle = {
      horizontal: 40,
      vertical: 80
    };
    return <Stack direction='column' gap={12}>
        {(['small', 'medium'] as Array<DividerSize>).map(size => {
        return <Stack direction='column' height={args.direction ? argStyle[args.direction] : 0} key={size} gap={8}>
              <BaseText>size: {size}</BaseText>
              <Divider {...args} size={size} />
            </Stack>;
      })}
      </Stack>;
  },
  args: {
    spacing: 24
  }
}
```

### Vertical

```tsx
{
  args: {
    direction: 'horizontal'
  },
  render: args => {
    const argStyle = {
      horizontal: 40,
      vertical: 80
    };
    return <Stack direction='column' gap={12}>
        {(['small', 'medium'] as Array<DividerSize>).map(size => {
        return <Stack direction='column' height={args.direction ? argStyle[args.direction] : 0} key={size} gap={8}>
              <BaseText>size: {size}</BaseText>
              <Divider {...args} size={size} />
            </Stack>;
      })}
      </Stack>;
  },
  args: {
    direction: 'vertical'
  }
}
```

### Vertical Spacing

```tsx
{
  args: {
    direction: 'horizontal'
  },
  render: args => {
    const argStyle = {
      horizontal: 40,
      vertical: 80
    };
    return <Stack direction='column' gap={12}>
        {(['small', 'medium'] as Array<DividerSize>).map(size => {
        return <Stack direction='column' height={args.direction ? argStyle[args.direction] : 0} key={size} gap={8}>
              <BaseText>size: {size}</BaseText>
              <Divider {...args} size={size} />
            </Stack>;
      })}
      </Stack>;
  },
  args: {
    direction: 'vertical',
    spacing: 24
  }
}
```