MultinaireText

Theme-aware text component with i18n support and loading states.

Basic Usage

import { MultinaireText } from '@multinaire/multinaire-design';

<MultinaireText>Hello World</MultinaireText>

<MultinaireText type="heading" weight="bold" color="primary">
  Styled Text
</MultinaireText>

Props

Prop	Type	Default	Description
type	StyleKeys	'body'	Text style preset (heading, subheading, body, caption, etc.)
weight	TextKeys	'regular'	Font weight (light, regular, medium, semibold, bold)
color	ColorKeys	'text'	Text color from theme
center	boolean	false	Center align text
margin	SpacingProps	-	Margin spacing
flex	number	-	Flex value
isLoading	boolean	false	Show loading skeleton
textWidth	number	-	Width for loading skeleton
translate	boolean	true	Enable i18n translation

Examples

Text Styles

<MultinaireText type="heading">Heading</MultinaireText>
<MultinaireText type="subheading">Subheading</MultinaireText>
<MultinaireText type="body">Body text</MultinaireText>
<MultinaireText type="caption">Caption</MultinaireText>

Font Weights

<MultinaireText weight="light">Light</MultinaireText>
<MultinaireText weight="regular">Regular</MultinaireText>
<MultinaireText weight="medium">Medium</MultinaireText>
<MultinaireText weight="semibold">Semibold</MultinaireText>
<MultinaireText weight="bold">Bold</MultinaireText>

Colors

<MultinaireText color="primary">Primary</MultinaireText>
<MultinaireText color="secondary">Secondary</MultinaireText>
<MultinaireText color="neutral">Neutral</MultinaireText>
<MultinaireText color="error">Error</MultinaireText>

Loading State

<MultinaireText isLoading textWidth={150}>
  This text is loading
</MultinaireText>

With Translation

// Automatically translates using i18next
<MultinaireText>welcome_message</MultinaireText>

// Disable translation
<MultinaireText translate={false}>Literal text</MultinaireText>