Divider

A hairline that separates two pieces of content.

<script setup lang="ts">
  import { Button, Card, Divider, Input, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full max-w-sm">
    <Stack>
      <Stack gap="xs">
        <Text size="sm">Email</Text>
        <Input model-value="shion@hikarinagi.moe" />
      </Stack>
      <Button>Sign in with email</Button>
      <Divider>or</Divider>
      <Button variant="outline" tone="neutral">Use a passkey</Button>
    </Stack>
  </Card>
</template>

vue

Usage

import { Divider } from '@hina-ui/vue'

Divider draws a one-pixel line coloured from --hn-line. It runs the full width of its container by default.

What comes before

What comes after

<script setup lang="ts">
  import { Divider, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Text>What comes before</Text>
    <Divider />
    <Text>What comes after</Text>
  </Stack>
</template>

vue

Examples

With a label

Text in the default slot breaks the line in two and sits between the halves. This shape works only horizontally.

Chapter I

Chapter two

The observatory lights came back on after midnight.

<script setup lang="ts">
  import { Divider, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Text>Chapter I</Text>
    <Divider>Chapter two</Divider>
    <Text>The observatory lights came back on after midnight.</Text>
  </Stack>
</template>

vue

Vertical

orientation="vertical" draws a vertical line whose height comes from the cross axis of the flex container, so the container needs a height of its own.

128 books

32 translators

Updated three hours ago

<script setup lang="ts">
  import { Divider, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline class="h-8">
    <Text tone="muted" size="sm">128 books</Text>
    <Divider orientation="vertical" />
    <Text tone="muted" size="sm">32 translators</Text>
    <Divider orientation="vertical" />
    <Text tone="muted" size="sm">Updated three hours ago</Text>
  </Inline>
</template>

vue

Decorative

By default it renders as role="separator" and is announced by screen readers. A line drawn purely for looks takes decorative, which keeps it out of the accessibility tree.

A separator by default, announced by screen readers

With decorative it is only a line, out of the accessibility tree

<script setup lang="ts">
  import { Divider, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Text tone="muted" size="sm">A separator by default, announced by screen readers</Text>
    <Divider />
    <Text tone="muted" size="sm">
      With decorative it is only a line, out of the accessibility tree
    </Text>
    <Divider decorative />
  </Stack>
</template>

vue

API

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction
`decorative`	`boolean`	`false`	Whether it leaves the accessibility tree
`class`	`string`	—	Classes appended to the line

Slot	Description
`default`	Text inside the line; horizontal only