Button Group

Imports

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

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@line/abc-def-react/button-group";

<script setup lang="ts">
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@line/abc-def-vue/button-group";
</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";
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@line/abc-def-react/button-group";

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Preview</Button>
      <ButtonGroupSeparator />
      <ButtonGroupText>v1.2</ButtonGroupText>
    </ButtonGroup>
  );
}

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

<template>
  <ButtonGroup>
    <Button variant="outline">Preview</Button>
    <ButtonGroupSeparator />
    <ButtonGroupText>v1.2</ButtonGroupText>
  </ButtonGroup>
</template>

Component tokens

Composition exports

Usage notes

• Keep grouped actions closely related.
• Use separators to clarify mixed action groups.
• Related component tokens use the `button-group` token group in `@line/abc-def-styles/css`.