Blade

A blade is a design element that expands horizontally to reveal information, similar to an accordion.

It is usually stacked horizontally with other blades and works best when used within a flex container. The HvBlades component is recommended for this purpose, as it also provides better management of the blades' expanded state.

Source Code

uikit-react-lab

Show answer

label

fullWidth

disabled

<HvBlade 
  label="Show answer"
  fullWidth={false}
  disabled={false}
  containerProps={{"style":{"whiteSpace":"nowrap"}}}
>
  <div className="p-xs">
    The answer to all things is 42.
  </div>
</HvBlade>

<HvBlade 
  label="Show answer"
  fullWidth={false}
  disabled={false}
  containerProps={{"style":{"whiteSpace":"nowrap"}}}
>
  <div className="p-xs">
    The answer to all things is 42.
  </div>
</HvBlade>

Content

The blade can have any content as its label or children.

Show Tags

<HvBlade
  className="w-fit"
  label={
    <div className="px-xs flex items-center">
      <HvTypography>Show Tags</HvTypography>
      <DropRightXS />
    </div>
  }
>
  <div className="p-xs flex items-center gap-xs">
    <HvTag label="Tag 1" color="positive_20" />
    <HvTag label="Tag 2" color="neutral_20" />
    <HvTag label="Tag 3" color="warning_20" />
  </div>
</HvBlade>

<HvBlade
  className="w-fit"
  label={
    <div className="px-xs flex items-center">
      <HvTypography>Show Tags</HvTypography>
      <DropRightXS />
    </div>
  }
>
  <div className="p-xs flex items-center gap-xs">
    <HvTag label="Tag 1" color="positive_20" />
    <HvTag label="Tag 2" color="neutral_20" />
    <HvTag label="Tag 3" color="warning_20" />
  </div>
</HvBlade>

Controlled

Show answer

import { useState } from "react";


export default function Demo() {
  const [expanded, setExpanded] = useState(false);


  return (
    <>
      <div className="flex gap-xs mb-xs">
        <HvButton variant="subtle" onClick={() => setExpanded((s) => !s)}>
          Toggle
        </HvButton>
        <HvButton variant="subtle" onClick={() => setExpanded(true)}>
          Open
        </HvButton>
        <HvButton variant="subtle" onClick={() => setExpanded(false)}>
          Close
        </HvButton>
      </div>
      <div className="flex w-full">
        <HvBlade
          label="Show answer"
          onChange={(e, state) => setExpanded(state)}
          expanded={expanded}
        >
          <div className="p-xs">The answer to all things is 42.</div>
        </HvBlade>
      </div>
    </>
  );
}

import { useState } from "react";

export default function Demo() {
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <div className="flex gap-xs mb-xs">
        <HvButton variant="subtle" onClick={() => setExpanded((s) => !s)}>
          Toggle
        </HvButton>
        <HvButton variant="subtle" onClick={() => setExpanded(true)}>
          Open
        </HvButton>
        <HvButton variant="subtle" onClick={() => setExpanded(false)}>
          Close
        </HvButton>
      </div>
      <div className="flex w-full">
        <HvBlade
          label="Show answer"
          onChange={(e, state) => setExpanded(state)}
          expanded={expanded}
        >
          <div className="p-xs">The answer to all things is 42.</div>
        </HvBlade>
      </div>
    </>
  );
}

Banner Blades