Button

<div
  className="f5-bg-color-a5"
  style={{
    display: 'flex',
    padding: 20,
    gap: 8,
    borderRadius: 4,
  }}
>
  <Button primary floa>
    Click me
  </Button>
  <Button>Click me</Button>
  <Button inverted>Click me</Button>
</div>

<Button primary floated="left">
  Click me
</Button>

<Button primary floated="right">
  Click me
</Button>

<div
  style={{
    display: 'flex',
    gap: 8,
  }}
>
  <Button primary disabled>
    Click me
  </Button>
  <Button disabled>Click me</Button>
  <Button inverted disabled>
    Click me
  </Button>
</div>

<div
  style={{
    display: 'flex',
    gap: 8,
  }}
>
  <Button loading primary>
    Click me
  </Button>
  <Button loading>Click me</Button>
  <Button inverted loading>
    Click me
  </Button>
</div>

<div
  className="f5-bg-color-a5"
  style={{
    display: 'flex',
    padding: 20,
    gap: 8,
    borderRadius: 4,
  }}
>
  <Button icon="play-icon" primary>
    Click me
  </Button>
  <Button icon="play-icon">Click me</Button>
  <Button icon="play-icon" active>
    Click me
  </Button>
  <Button icon="play-icon" onlyIcon />
  <Button inverted icon="play-icon">
    Click me
  </Button>
  <Button inverted icon="play-icon" onlyIcon />
</div>

<div
  style={{
    display: 'grid',
    gap: '8px 32px',
    gridTemplate:
      'repeat(2, fit-content(100%)) / repeat(4, fit-content(100%))',
  }}
>
  <Label htmlFor="primary-button-with-icon">Кнопка с типом primary:</Label>
  <Label htmlFor="icon-button">Иконочная кнопка:</Label>
  <Label htmlFor="inverted-button-with-icon">Кнопка с типом inverted:</Label>
  <Label htmlFor="inverted-icon-button">
    Иконочная кнопка с типом inverted:
  </Label>
  <div>
    <Button id="primary-button-with-icon" icon="play-icon" primary disabled>
      Click me
    </Button>
  </div>
  <div>
    <Button id="icon-button" icon="play-icon" onlyIcon disabled />
  </div>
  <div>
    <Button id="inverted-button-with-icon" inverted icon="play-icon" disabled>
      Click me
    </Button>
  </div>
  <div>
    <Button
      id="inverted-icon-button"
      inverted
      icon="play-icon"
      onlyIcon
      disabled
    />
  </div>
</div>

<div
  style={{
    display: 'flex',
    gap: 8,
  }}
>
  <Button icon="play-icon" primary loading>
    Click me
  </Button>
  <Button icon="play-icon" onlyIcon loading />
  <Button inverted icon="play-icon" loading>
    Click me
  </Button>
  <Button inverted icon="play-icon" onlyIcon loading />
</div>

<div
  className="f5-bg-color-a5"
  style={{
    display: 'flex',
    padding: 20,
    gap: 16,
    borderRadius: 4,
  }}
>
  <Button.Group>
    <Button active>Click me</Button>
    <Button>Click me</Button>
    <Button>Click me</Button>
  </Button.Group>
  <Button.Group>
    <Button inverted active>
      Click me
    </Button>
    <Button inverted>Click me</Button>
    <Button inverted>Click me</Button>
  </Button.Group>
</div>

<div
  className="f5-bg-color-a5"
  style={{
    display: 'flex',
    padding: 20,
    gap: 16,
    borderRadius: 4,
  }}
>
  <Button.Group vertical>
    <Button>Click me</Button>
    <Button>Click me</Button>
    <Button>Click me</Button>
  </Button.Group>
  <Button.Group vertical>
    <Button inverted>Click me</Button>
    <Button inverted>Click me</Button>
    <Button inverted>Click me</Button>
  </Button.Group>
</div>