Button

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

Prop	Default	Type
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	false	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>

Close button

CloseButton is an icon-only button for dismissing a surface. Always provide an accessible name such as aria-label="Close".

vue

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

<template>
  <CloseButton aria-label="Close" />
</template>

Prop	Default	Type
as	"button"	AsTagComponent The element or component this component should render as.
asChild	–	boolean
color	"gray"	Color Overrides the accent color inherited from the ThemeProvider.
disabled	–	boolean Mark the button as disabled.
highContrast	false	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	"ghost"	Enum The visual variant to apply.

API Reference ​

Examples ​

Size ​

Variant ​

Disabled ​

Ghost ​

Color ​

High Contrast ​

Radius ​

Close button ​