Heading

Semantic heading component for section titles.

Heading

Heading is a typography component for rendering section headings with appropriate sizing.

Import

import { Heading } from 'radix-native-ui';

Usage

import { Heading } from 'radix-native-ui';

<Heading size={4}>Section Title</Heading>

Props

Examples

Sizes

<Heading size={1}>Heading 1 - Largest</Heading>
<Heading size={2}>Heading 2</Heading>
<Heading size={3}>Heading 3</Heading>
<Heading size={4}>Heading 4 - Default</Heading>
<Heading size={5}>Heading 5</Heading>
<Heading size={6}>Heading 6</Heading>
<Heading size={7}>Heading 7</Heading>
<Heading size={8}>Heading 8</Heading>
<Heading size={9}>Heading 9 - Smallest</Heading>

Weights

<Heading weight="light">Light heading</Heading>
<Heading weight="regular">Regular heading</Heading>
<Heading weight="medium">Medium heading</Heading>
<Heading weight="bold">Bold heading (default)</Heading>

Colors

<Heading color="gray">Gray heading</Heading>
<Heading color="blue">Blue heading</Heading>
<Heading color="indigo">Indigo heading</Heading>

Alignment

<Heading align="left">Left aligned</Heading>
<Heading align="center">Center aligned</Heading>
<Heading align="right">Right aligned</Heading>

Page Header

<Flex direction="column" gap={2}>
  <Heading size={5}>Page Title</Heading>
  <Text color="gray">Page description goes here.</Text>
</Flex>

Card Header

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Card Title</Heading>
    <Text>Card content goes here.</Text>
  </Flex>
</Card>

Related

• Text - Text component
• Strong - Bold text
• Flex - Layout component