Text - Chakra UI

Trang chủ » Chakra Ui H1 » Text - Chakra UI

Có thể bạn quan tâm

Build faster with Premium Chakra UI Components 💎

Learn moreSkip to Content

  1. Typography

  2. Text

ConceptsOverviewCompositionAnimationColor ModeServer ComponentTestingLayoutAspect RatioBleedBoxCenter (Absolute)CenterContainerFlexFloatGridGroupScroll AreaSeparatorSimpleGridSplitterStackWrapTypographyBlockquoteCodeCode BlockEmHeadingHighlightKbdLinkLink OverlayListMarkProseRich Text EditorTextButtonsButtonClose ButtonIcon ButtonDownload TriggerDate and TimenewDate PickerCalendarFormsCheckboxCheckbox CardColor PickerColor SwatchEditableFieldFieldsetFile UploadInputNumber InputPassword InputPin InputRadio CardRadioRatingSegmented ControlSelect (Native)SwitchSliderTextareaTags InputCollectionsComboboxListboxSelectTree ViewOverlaysAction BarDialogDrawerHover CardMenuOverlay ManagerPopoverToggle TipTooltipDisclosureAccordionBreadcrumbCarouselCollapsiblePaginationStepsTabsFeedbackAlertEmpty StateProgress CircleProgressSkeletonSpinnerStatusToastData DisplayAvatarBadgeCardClipboardImageData ListIconMarqueeQR CodeStatTableTagTimelineInternationalizationLocaleProviderFormatNumberFormatByteUtilitiesCheckmarkClientOnlyEnvironmentProviderForPresencePortalRadiomarkShowSkip NavVisually HiddenThemeText

Used to render text and paragraphs within an interface.

SourceAI TipWant to skip the docs? Use the MCP Server Copy PagePreviewCodeStackblitz

Sphinx of black quartz, judge my vow.

Usage

import { Text } from "@chakra-ui/react" <Text>This is the text component</Text>

Examples

Sizes

Use the fontSize or textStyle prop to change the size of the text.

PreviewCodeStackblitz

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Chakra

Weights

Use the fontWeight prop to change the weight of the text.

PreviewCodeStackblitz

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Truncation

Use the truncate prop to truncate the text after a single line.

PreviewCodeStackblitz

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Line Clamp

Use the lineClamp prop to truncate the text after a certain number of lines.

PreviewCodeStackblitz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ref

Here's how to access the underlying element reference

const Demo = () => { const ref = useRef<HTMLParagraphElement | null>(null) return <Text ref={ref}>This is the text component</Text> }

Previous

Rich Text Editor

Next

Button

On this page

UsageExamplesSizesWeightsTruncationLine ClampRefEdit page on GitHubScroll to top

Master Chakra UI

Learn how to build design systems with hands-on examples and expert guidance

Watch Now

Từ khóa » Chakra Ui H1