Text

Import

import { Text } from "react-sheikah-ui";

Usage

Standard component for display text to matches with the UI.

Savage Lynel Spear

White-haired Lynels favor these brutal spears. Its axe-like spearhead and exceptional weight give it absolute destructive power.

import { Text } from "react-sheikah-ui";

<Text variant="title-2" withDivider block>
  Savage Lynel Spear
</Text>

<Text>
  White-haired Lynels favor these brutal spears. Its axe-like spearhead and
  exceptional weight give it absolute destructive power.
</Text>

Available Props

variant

Used to define the variant of the text. Defaults to base.

title-1

Scimitar of the Seven

title-2

Scimitar of the Seven

title-3

Scimitar of the Seven

large

Scimitar of the Seven

base

Scimitar of the Seven

small

Scimitar of the Seven

tiny

Scimitar of the Seven

color

Define the color of the text based on the preset colors.

uiLightPrimary

Great Eagle Bow

uiLightSecondary

Great Eagle Bow

uiDarkPrimary

Great Eagle Bow

uiDarkSecondary

Great Eagle Bow

uiBlue

Great Eagle Bow

uiCyan

Great Eagle Bow

uiGreen

Great Eagle Bow

uiRed

Great Eagle Bow

uiYellow

Great Eagle Bow

withDivider

Optional Used to give the text component a bottom divider.

withDivider: true

Boulder Breaker

withDivider: false

Boulder Breaker

<Text variant="title-3" withDivider block>Boulder Breaker</Text>
<Text variant="title-3" block>Boulder Breaker</Text>

block

Optional Set this to true to enable block type display and create a new line.

block: false

If you return my lost

Korok Seed

to me, I can expand the size of your inventory.

block: true

If you return my lost

Korok Seed

to me, I can expand the size of your inventory.

// without block
<Text>
  If you return my lost <Text color="uiCyan">Korok Seed</Text> to me, I
  can expand the size of your inventory.
</Text>

// with block
<Text>
  If you return my lost <Text color="uiCyan" block>Korok Seed</Text> to me, I
  can expand the size of your inventory.
</Text>

as

Optional Text component are rendered as div by default. Use this props to change the HTML tag type.

// without block
<Text variant="title-2" as="h1">
  Inventory
</Text>

style

Optional Used to give additional standard style object to the component.