Typography

Typography component is used to render text and paragraphs within an interface.

Color

You can style the text color using any of the styling strategies we recommend.

This is a typography

<div className="flex flex-col gap-xs">
  <HvTypography className="color-text">This is a typography</HvTypography>
  <HvTypography className="color-positive">This is a typography</HvTypography>
  <HvTypography className="color-[coral]">This is a typography</HvTypography>
</div>

<div className="flex flex-col gap-xs">
  <HvTypography className="color-text">This is a typography</HvTypography>
  <HvTypography className="color-positive">This is a typography</HvTypography>
  <HvTypography className="color-[coral]">This is a typography</HvTypography>
</div>

Root component

The HvTypography component is a polymorphic component. Its default component is p, but it can be changed to any other element through the component prop.

Typography as a spanTypography as a link

<div className="flex flex-col gap-xs">
  <HvTypography component="span">Typography as a span</HvTypography>
  <HvTypography
    component="a"
    href="https://lumada-design.github.io/uikit-docs/master/"
    link
  >
    Typography as a link
  </HvTypography>
</div>

<div className="flex flex-col gap-xs">
  <HvTypography component="span">Typography as a span</HvTypography>
  <HvTypography
    component="a"
    href="https://lumada-design.github.io/uikit-docs/master/"
    link
  >
    Typography as a link
  </HvTypography>
</div>

You can also change the root component of the HvTypography component to a custom component. The example below shows how to create an a component that opens a link in a new tab with an indicator icon.

Custom link

interface ExternalLinkProps extends HvTypographyProps<"a"> {
  to: string;
}


const ExternalLink = ({ to, children, ...others }: ExternalLinkProps) => (
  <a href={to} target="_blank" rel="noopener noreferrer" {...others}>
    {children}
    <span className="i-ph-arrow-square-out inline-block" />
  </a>
);


export default function Demo() {
  return (
    <HvTypography
      link
      component={ExternalLink}
      to="https://lumada-design.github.io/uikit-docs/master/"
    >
      Custom link
    </HvTypography>
  );
}

interface ExternalLinkProps extends HvTypographyProps<"a"> {
  to: string;
}

const ExternalLink = ({ to, children, ...others }: ExternalLinkProps) => (
  <a href={to} target="_blank" rel="noopener noreferrer" {...others}>
    {children}
    <span className="i-ph-arrow-square-out inline-block" />
  </a>
);

export default function Demo() {
  return (
    <HvTypography
      link
      component={ExternalLink}
      to="https://lumada-design.github.io/uikit-docs/master/"
    >
      Custom link
    </HvTypography>
  );
}