Button

Trigger an action or event, such as submitting a form or displaying a dialog.
stableView sourceRadix Themes
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Button } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button>
      <Icon icon="lucide:bookmark" />
      Bookmark
    </Button>
  </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.

highContrast
–
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 ​

Use the size prop to control the size of the button.

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

<template>
  <div class="flex items-center gap-2">
    <Button size="1" variant="soft">
      Edit profile
    </Button>
    <Button size="2" variant="soft">
      Edit profile
    </Button>
    <Button size="3" variant="soft">
      Edit profile
    </Button>
    <Button size="4" variant="soft">
      Edit profile
    </Button>
  </div>
</template>

Variant ​

Use the variant prop to control the visual style of the button.

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

<template>
  <div class="flex items-center gap-2">
    <Button variant="classic">
      Edit profile
    </Button>
    <Button variant="solid">
      Edit profile
    </Button>
    <Button variant="soft">
      Edit profile
    </Button>
    <Button variant="surface">
      Edit profile
    </Button>
    <Button variant="outline">
      Edit profile
    </Button>
  </div>
</template>

Disabled ​

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

<template>
  <div class="flex items-center gap-2">
    <Button variant="classic" disabled>
      Edit profile
    </Button>
    <Button variant="solid" disabled>
      Edit profile
    </Button>
    <Button variant="soft" disabled>
      Edit profile
    </Button>
    <Button variant="surface" disabled>
      Edit profile
    </Button>
    <Button variant="outline" disabled>
      Edit profile
    </Button>
  </div>
</template>

Ghost ​

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

<template>
  <div class="flex items-center gap-2">
    <Button variant="ghost">Edit profile</Button>
    <Button variant="ghost" disabled>Edit profile</Button>
  </div>
</template>

Color ​

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

<template>
  <div class="flex items-center gap-2">
    <Button color="indigo" variant="soft">Edit profile</Button>
    <Button color="cyan" variant="soft">Edit profile</Button>
    <Button color="orange" variant="soft">Edit profile</Button>
    <Button color="crimson" variant="soft">Edit profile</Button>
  </div>
</template>

High Contrast ​

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

<template>
  <div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
      <Button color="gray" variant="classic">
        Edit profile
      </Button>
      <Button color="gray" variant="solid">
        Edit profile
      </Button>
      <Button color="gray" variant="soft">
        Edit profile
      </Button>
      <Button color="gray" variant="surface">
        Edit profile
      </Button>
      <Button color="gray" variant="outline">
        Edit profile
      </Button>
    </div>
    <div class="flex items-center gap-2">
      <Button color="gray" variant="classic" high-contrast>
        Edit profile
      </Button>
      <Button color="gray" variant="solid" high-contrast>
        Edit profile
      </Button>
      <Button color="gray" variant="soft" high-contrast>
        Edit profile
      </Button>
      <Button color="gray" variant="surface" high-contrast>
        Edit profile
      </Button>
      <Button color="gray" variant="outline" high-contrast>
        Edit profile
      </Button>
    </div>
  </div>
</template>

Radius ​

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

<template>
  <div class="flex items-center gap-2">
    <Button radius="none" variant="soft">
      Edit profile
    </Button>
    <Button radius="small" variant="soft">
      Edit profile
    </Button>
    <Button radius="medium" variant="soft">
      Edit profile
    </Button>
    <Button radius="large" variant="soft">
      Edit profile
    </Button>
    <Button radius="full" variant="soft">
      Edit profile
    </Button>
  </div>
</template>