Icon Button

Button designed specifically for usage with a single icon.
stableView sourceRadix Themes
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton>
      <Icon icon="lucide:bookmark" />
    </IconButton>
  </div>
</template>

API Reference ​

PropDefaultType
as"button"
AsTagComponent

The element or component this component should render as.

asChild
–
boolean
color
–
Color

Overrides the accent color inherited from the ThemeProvider.

disabled
–
boolean

Mark the button as disabled.

highContrastfalse
boolean

Uses a higher contrast color for the component.

radius
–
"none""small""medium""large""full"

Overrides the radius inherited from the ThemeProvider.

size"2"
"1""2""3""4"

Control the size of the button.

variant"solid"
Enum

The visual variant to apply.

Examples ​

Size ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton size="1" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton size="2" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton size="3" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton size="4" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton variant="classic">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton variant="solid">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton variant="surface">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton variant="outline">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton variant="ghost">
      <Icon icon="lucide:bookmark" />
    </IconButton>
  </div>
</template>

Color ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton color="indigo" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton color="cyan" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton color="orange" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton color="crimson" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
  </div>
</template>

Radius ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton radius="none" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton radius="small" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton radius="medium" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton radius="large" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
    <IconButton radius="full" variant="soft">
      <Icon icon="lucide:bookmark" />
    </IconButton>
  </div>
</template>
Last updated Sep 15, 2026
ButtonBreadcrumb