Typography

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

Welcome to Hitachi Vantara's UI Kit.

variant

disabled

noWrap

link

<HvTypography 
  variant="body"
  disabled={false}
  noWrap={false}
  link={false}
>
  Welcome to Hitachi Vantara's UI Kit.
</HvTypography>

<HvTypography 
  variant="body"
  disabled={false}
  noWrap={false}
  link={false}
>
  Welcome to Hitachi Vantara's UI Kit.
</HvTypography>

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-sm">
  <HvTypography component="span">Typography as a span</HvTypography>
  <HvTypography
    component="a"
    href="https://lumada-design.github.io/uikit/master"
    link
  >
    Typography as a link
  </HvTypography>
</div>

<div className="flex flex-col gap-sm">
  <HvTypography component="span">Typography as a span</HvTypography>
  <HvTypography
    component="a"
    href="https://lumada-design.github.io/uikit/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/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/master"
    >
      Custom link
    </HvTypography>
  );
}

Tree View Vertical Navigation