IconButton

<IconButton aria-label="Plus" icon={<PlusIcon />} />

<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
    {(variant, index) => (
      <IconButton
        key={index}
        variant={variant}
        aria-label="Plus"
        icon={<PlusIcon />}
      />
    )}
  </For>
</Wrap>

<Wrap gap="md" alignItems="flex-start">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <IconButton
        key={index}
        size={size}
        aria-label="Plus"
        icon={<PlusIcon />}
      />
    )}
  </For>
</Wrap>

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <IconButton
        key={index}
        colorScheme={colorScheme}
        aria-label="Plus"
        icon={<PlusIcon />}
      />
    )}
  </For>
</Wrap>

<Wrap gap="md">
  <IconButton
    variant="solid"
    aria-label="Plus"
    fullRounded
    icon={<PlusIcon />}
  />

  <IconButton
    variant="subtle"
    aria-label="Minus"
    fullRounded
    icon={<MinusIcon />}
  />

  <IconButton
    variant="surface"
    aria-label="Bold"
    fullRounded
    icon={<BoldIcon />}
  />

  <IconButton
    variant="outline"
    aria-label="Light"
    fullRounded
    icon={<SunIcon />}
  />

  <IconButton
    variant="ghost"
    aria-label="Dark"
    fullRounded
    icon={<MoonIcon />}
  />
</Wrap>

<Wrap gap="md">
  <IconButton variant="solid" aria-label="Plus" disabled icon={<PlusIcon />} />

  <IconButton
    variant="subtle"
    aria-label="Minus"
    disabled
    icon={<MinusIcon />}
  />

  <IconButton
    variant="surface"
    aria-label="Bold"
    disabled
    icon={<BoldIcon />}
  />

  <IconButton
    variant="outline"
    aria-label="Light"
    disabled
    icon={<SunIcon />}
  />

  <IconButton variant="ghost" aria-label="Dark" disabled icon={<MoonIcon />} />
</Wrap>