Button

Button component is used to trigger an action or event.

Source Code

uikit-react-core

variant

size

xssmmdlgxl

radius

nonebaseroundlargecirclefull

disabled

<HvButton 
  variant="primary"
  size="md"
  radius="full"
  disabled={false}
>
  <p>
    Button
  </p>
</HvButton>

<HvButton 
  variant="primary"
  size="md"
  radius="full"
  disabled={false}
>
  <p>
    Button
  </p>
</HvButton>

Sizes

<div className="flex gap-xs items-center">
  <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>
</div>

<div className="flex gap-xs items-center">
  <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>
</div>

Icon

Use the startIcon or endIcon props to add icons to a button. You can also use the icon prop to pass an icon directly as a child of HvButton.

For icon-only buttons, prefer using HvIconButton, which wraps the icon in a HvTooltip and enforces an accessible title for better usability.

<div className="flex gap-xs items-center">
  <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>
</div>

<div className="flex gap-xs items-center">
  <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>
</div>

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 (
    <div className="flex gap-xs">
      <HvButton variant="subtle" component="a" href="#" startIcon={<Link />}>
        Link
      </HvButton>
      <HvButton variant="subtle" component={MyLink} to="#" startIcon={<Link />}>
        Custom link
      </HvButton>
    </div>
  );
}


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 (
    <div className="flex gap-xs">
      <HvButton variant="subtle" component="a" href="#" startIcon={<Link />}>
        Link
      </HvButton>
      <HvButton variant="subtle" component={MyLink} to="#" startIcon={<Link />}>
        Custom link
      </HvButton>
    </div>
  );
}

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 needed for accessibility, set focusableWhenDisabled to true to keep the button focusable and readable by screen readers, even when disabled.

<HvButton disabled focusableWhenDisabled>
  Primary
</HvButton>

<HvButton disabled focusableWhenDisabled>
  Primary
</HvButton>

Bulk Actions Card