Button

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Button, buttonVariants } from "@line/abc-def-react/button";

<script setup lang="ts">
import { Button, buttonVariants } from "@line/abc-def-vue/button";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Button } from "@line/abc-def-react/button";

export function Example() {
  return <Button variant="outline">Save changes</Button>;
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
</script>

<template>
  <Button variant="outline">Save changes</Button>
</template>

Component tokens

Composition exports

Usage notes

• Choose the variant by action priority.
• Prefer icons plus concise labels for repeated tool actions.
• Related component tokens use the `button` token group in `@line/abc-def-styles/css`.