# betterdocs/4.9.5/react-src/gutenberg/util/unit-control/index.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 25 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/unit-control/index.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/unit-control/index.js
- Modified: 2026-10-12T10:07:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/unit-control/index.js#L10-L20`.

```javascript
/**
 * WordPress dependencies
 */
const { ButtonGroup, Button } = wp.components;

const UnitControl = ({ selectedUnit, unitTypes, onClick }) => (
  <ButtonGroup className="eb-unit-control-btn-group">
    {unitTypes.map((unit) => (
      <Button
        key={unit.value}
        className={`eb-unit-control-btn ${
          unit.value === selectedUnit && "eb-unit-active"
        }`}
        isSmall
        isPrimary={unit.value === selectedUnit}
        onClick={() => onClick(unit.value)}
      >
        {unit.label}
      </Button>
    ))}
  </ButtonGroup>
);

export default UnitControl;

```