Image Link

The ImageLink component wraps an image in a link. It is intended for linking logos or app store badges.

Examples

Button Size

Preview

Code

import { ImageLink } from '@hv/ui/image-link';

<ImageLink
  label='Google Play Store'
  href='https://play.google.com/store/apps'
  imageUrl='/googlePlayStoreLogo.png'
  size='button'
/>

Small Size

Preview

Code

import { ImageLink } from '@hv/ui/image-link';

<ImageLink
  label='High Velocity'
  href='/'
  imageUrl='logo.svg'
  size='sm'
/>

Medium Size

Preview

Code

import { ImageLink } from '@hv/ui/image-link';

<ImageLink
  label='High Velocity'
  href='/'
  imageUrl='logo.svg'
  size='md'
/>

Large Size

Preview

Code

import { ImageLink } from '@hv/ui/image-link';

<ImageLink
  label='High Velocity'
  href='/'
  imageUrl='logo.svg'
  size='lg'
/>

Customization

You have flexibility on how you can customize these components; your approach will depend on if you need a global solution, such as a new variant, or a one-off change.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• For a one-off change, pass className overrides

Adding a custom variant or size

In the component source code (hv-ui/src/image-link.tsx), add your new variant's name and classes directly to the imageLinkVariants object.

    variant: {
      newvariant: '...'
    },
    size: {
      button: '...',
      sm: '...',
      md: '...',
      lg: '...',
    }

Then pass in your variant on the component:

<ImageLink
  label='Google Play Store'
  href='https://play.google.com/store/apps'
  imageUrl='/googlePlayStoreLogo.png'
  variant='newvariant'
  size='md'
/>

Overriding a variant

If you need to adjust the styles in a one-off use case, you can pass in classes directly on the components.

For example, if you need to adjust its padding in a single layout:

<ImageLink
  label='Google Play Store'
  href='https://play.google.com/store/apps'
  imageUrl='/img/googlePlayStoreLogo.png'
  size='button'
  className='py-5'
/>