Heading

The Heading component extends the specified h* HTML element. You'll use it to render different levels of headings.

Usage

Import the Heading component from @avocado-ui/react and render like so

Heading

import { Heading } from '@avocado-ui/react'
render(<Heading level='h1'>Heading</Heading>)

import { Heading } from '@avocado-ui/react'
render(<Heading level='h1'>Heading</Heading>)

Level

There're 6 heading levels in HTML. You can specify the preferred heading with the level prop like so

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

import { Heading } from '@avocado-ui/react'
render(
  <>
    <Heading level='h1'>Heading 1</Heading>
    <Heading level='h2'>Heading 2</Heading>
    <Heading level='h3'>Heading 3</Heading>
    <Heading level='h4'>Heading 4</Heading>
    <Heading level='h5'>Heading 5</Heading>
    <Heading level='h6'>Heading 6</Heading>
  </>
)

import { Heading } from '@avocado-ui/react'
render(
  <>
    <Heading level='h1'>Heading 1</Heading>
    <Heading level='h2'>Heading 2</Heading>
    <Heading level='h3'>Heading 3</Heading>
    <Heading level='h4'>Heading 4</Heading>
    <Heading level='h5'>Heading 5</Heading>
    <Heading level='h6'>Heading 6</Heading>
  </>
)

Size

You can also override the size for different heading levels with the size prop. The supported values are as follows xs, ms, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' size='xs'>
      Heading 1
    </Heading>
    <Heading level='h2' size='ms'>
      Heading 2
    </Heading>
    <Heading level='h3' size='sm'>
      Heading 3
    </Heading>
    <Heading level='h4' size='lg'>
      Heading 4
    </Heading>
    <Heading level='h5' size='xl'>
      Heading 5
    </Heading>
    <Heading level='h6' size='2xl'>
      Heading 6
    </Heading>
  </>
)

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' size='xs'>
      Heading 1
    </Heading>
    <Heading level='h2' size='ms'>
      Heading 2
    </Heading>
    <Heading level='h3' size='sm'>
      Heading 3
    </Heading>
    <Heading level='h4' size='lg'>
      Heading 4
    </Heading>
    <Heading level='h5' size='xl'>
      Heading 5
    </Heading>
    <Heading level='h6' size='2xl'>
      Heading 6
    </Heading>
  </>
)

Trim Heading

You might want to keep things trimmed while using the Heading component. Avacodo provides the trim prop which takes an integer, truncates text to the length and appends ... to it.

Head...

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' trim={4}>
      Heading 1
    </Heading>
  </>
)

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' trim={4}>
      Heading 1
    </Heading>
  </>
)

Align Text

A quick utility on the Heading component is the align prop. You can use it to change the direction of the text. It could either be left, center, right.

Heading 1

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' align='center'>
      Heading 1
    </Heading>
    <Heading level='h1' align='left'>
      Heading 1
    </Heading>
    <Heading level='h1' align='right'>
      Heading 1
    </Heading>
  </>
)

import { Heading } from '@avocado-ui/react'

render(
  <>
    <Heading level='h1' align='center'>
      Heading 1
    </Heading>
    <Heading level='h1' align='left'>
      Heading 1
    </Heading>
    <Heading level='h1' align='right'>
      Heading 1
    </Heading>
  </>
)

Heading Props

property	description	type	default
level	level of heading	`h1`, `h2`,`h3`	null
size	size to override heading size	`xs`, `ms`, `sm`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`	`level`
trim	specifies a number to truncate text	number	null
align	specifies the horizontal orientation of text	`center`, `left`, `right`	`left`