Getting Started

Foundations

ColorPaletteTypographyIconographyThemingBreakpoints

Core Components

AbsoluteBackgroundImageBadgeBannerBlockLinkBoxButtonCardCheckboxCloseButtonContainerDividerFlagFlexFormFieldGenericBannerHeadingHideHugIconIconButtonIconFieldImageInputInputGroupLabelLinkPlaceholderImageProgressBarRadioRatingBadgeRelativeSelectStampSwatchTextTextAreaToggleBadgeTooltipTruncate

Modal Components

ModalScrollLock

Popover

Popover

Slider

RangeSliderSlider

Utilities

borderscolorgetPaletteColorgetTextColorOngetLinkStylesOn

Resources

MotionLayoutContributingGitHub

Flag

Use the Flag component for stylized merchandising messages.

Hello
<Card py={3}>
  <Flag>
    Hello
  </Flag>
</Card>
Hello
<Card py={3}>
  <Flag width={192} bg='purple'>
    Hello
  </Flag>
</Card>

Props

PropTypeDescription
colorstringText color
bgstringBackground color
Divider
Flex