Typography

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

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.

Custom link

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


const CustomLink = ({ to, children, ...others }: CustomLinkProps) => (
  <a href={to} {...others}>
    {children}
  </a>
);


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

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

const CustomLink = ({ to, children, ...others }: CustomLinkProps) => (
  <a href={to} {...others}>
    {children}
  </a>
);

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

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>

External link icon

While the HvTypography component doesn’t directly support having an external link icon, you can easily create a custom component that includes this functionality and use it as the root component for HvTypography.

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


const CustomLink = ({ to, children, ...others }: CustomLinkProps) => (
  <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={CustomLink}
      to="https://lumada-design.github.io/uikit-docs/master/"
    >
      Read more
    </HvTypography>
  );
}

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

const CustomLink = ({ to, children, ...others }: CustomLinkProps) => (
  <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={CustomLink}
      to="https://lumada-design.github.io/uikit-docs/master/"
    >
      Read more
    </HvTypography>
  );
}