Button

Button component is used to trigger an action or event.

Source Code

uikit-react-core

variant

size

xssmmdlgxl

radius

nonebaseroundcirclefull

disabled



<HvButton variant="primary" size="md" radius="base">
<p>
  Button
</p>
</HvButton>


<HvButton variant="primary" size="md" radius="base">
<p>
  Button
</p>
</HvButton>

Sizes

<>
  <HvButton size="sm">Small</HvButton>
  <HvButton size="md">Medium</HvButton>
  <HvButton size="lg">Large</HvButton>
  <HvButton icon size="md" aria-label="Play">
    <Play />
  </HvButton>
  <HvButton icon size="lg" aria-label="Play">
    <Play />
  </HvButton>
</>

<>
  <HvButton size="sm">Small</HvButton>
  <HvButton size="md">Medium</HvButton>
  <HvButton size="lg">Large</HvButton>
  <HvButton icon size="md" aria-label="Play">
    <Play />
  </HvButton>
  <HvButton icon size="lg" aria-label="Play">
    <Play />
  </HvButton>
</>

Icon

Use the startIcon or endIcon props to insert an icon on the button. You can also use the icon prop and pass icon directly to children of the HvButton component.

When using icon-only buttons (icon prop), it’s preferable to use the HvIconButton component instead, as it wraps the button in an HvTooltip component and requires a title label.

<>
  <HvButton startIcon={<Play />} variant="primary">
    Play
  </HvButton>
  <HvButton endIcon={<Pause />} variant="secondarySubtle">
    Pause
  </HvButton>
  <HvButton icon aria-label="Play">
    <Play size="XS" />
  </HvButton>
  <HvIconButton title="Play">
    <Play size="XS" />
  </HvIconButton>
</>

<>
  <HvButton startIcon={<Play />} variant="primary">
    Play
  </HvButton>
  <HvButton endIcon={<Pause />} variant="secondarySubtle">
    Pause
  </HvButton>
  <HvButton icon aria-label="Play">
    <Play size="XS" />
  </HvButton>
  <HvIconButton title="Play">
    <Play size="XS" />
  </HvIconButton>
</>

Custom root component

You can use the component prop to change the root component of the button to be other than button whether it’s a native HTML element or your own custom React component.

Link

Custom link

export default function Demo() {
  return (
    <>
      <HvButton variant="subtle" component="a" href="#" startIcon={<Link />}>
        Link
      </HvButton>
      <HvButton variant="subtle" component={MyLink} to="#" startIcon={<Link />}>
        Custom link
      </HvButton>
    </>
  );
}


function MyLink({ to, children, ...others }: MyLinkProps) {
  return (
    <a href={to} {...others}>
      {children}
    </a>
  );
}


interface MyLinkProps extends HvButtonProps<"a"> {
  to: string;
}

export default function Demo() {
  return (
    <>
      <HvButton variant="subtle" component="a" href="#" startIcon={<Link />}>
        Link
      </HvButton>
      <HvButton variant="subtle" component={MyLink} to="#" startIcon={<Link />}>
        Custom link
      </HvButton>
    </>
  );
}

function MyLink({ to, children, ...others }: MyLinkProps) {
  return (
    <a href={to} {...others}>
      {children}
    </a>
  );
}

interface MyLinkProps extends HvButtonProps<"a"> {
  to: string;
}

Semantic buttons

If you need a button that exists on a semantic container you can set the variant prop to semantic.

<div className="flex flex-wrap gap-sm p-sm text-base_dark bg-neutral_20">
  <HvButton variant="semantic" startIcon={<Favorite />}>
    Favorite
  </HvButton>
  <HvButton variant="semantic" startIcon={<Refresh />}>
    Refresh
  </HvButton>
  <HvButton variant="semantic" startIcon={<Delete />}>
    Delete
  </HvButton>
  <HvButton variant="semantic" icon aria-label="More options">
    <MoreOptionsVertical />
  </HvButton>
</div>

<div className="flex flex-wrap gap-sm p-sm text-base_dark bg-neutral_20">
  <HvButton variant="semantic" startIcon={<Favorite />}>
    Favorite
  </HvButton>
  <HvButton variant="semantic" startIcon={<Refresh />}>
    Refresh
  </HvButton>
  <HvButton variant="semantic" startIcon={<Delete />}>
    Delete
  </HvButton>
  <HvButton variant="semantic" icon aria-label="More options">
    <MoreOptionsVertical />
  </HvButton>
</div>

Focusable when disabled

If you still need the button to be focusable when disabled for accessibility purposes, you can set the focusableWhenDisabled property to true. When using this property, the buttons will continue to be read by screen readers when disabled.

<HvButton disabled focusableWhenDisabled>
  Primary
</HvButton>

<HvButton disabled focusableWhenDisabled>
  Primary
</HvButton>

Banner Card