Usage

Default

Wrap your content with the <CLA11yButton /> component to make it accessible and interactive. The component provides keyboard support (Enter key) and proper focus management.

Colors

Use the color prop to customize the focus outline color of the component.

Enabled State

Use the enabled prop to control whether the component is interactive. When set to false, it mimics the disabled state of a standard button.

<script setup lang="ts">
import CLA11yButton from '@codeandfunction/callaloo/CLA11yButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Enabled
    </div>
  </CLA11yButton>
  <CLA11yButton :enabled="false" :color="CLColors.Primary" rounded>
    <div style="padding: 0.75rem; background: #f0f0f0; text-align: center; opacity: 0.6;">
      Disabled
    </div>
  </CLA11yButton>
</template>

Rounded Corners

Use the rounded prop to control whether the component has rounded corners.

<script setup lang="ts">
import CLA11yButton from '@codeandfunction/callaloo/CLA11yButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Rounded
    </div>
  </CLA11yButton>
  <CLA11yButton :color="CLColors.Primary" :rounded="false" enabled>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Square
    </div>
  </CLA11yButton>
</template>

Fluid Width

Use the fluid prop to control whether the component takes up 100% of its parent's width. By default, this is set to true.

<script setup lang="ts">
import CLA11yButton from '@codeandfunction/callaloo/CLA11yButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLA11yButton :color="CLColors.Primary" :fluid="true" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Fluid (100% width)
    </div>
  </CLA11yButton>
  <CLA11yButton :color="CLColors.Primary" :fluid="false" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Inline
    </div>
  </CLA11yButton>
</template>

With Clickable Elements

The component intelligently handles clicks on nested clickable elements (like buttons or links). Add the data-expand-click-area attribute to elements that should be clickable within the A11y Button.

<script setup lang="ts">
import CLA11yButton from '@codeandfunction/callaloo/CLA11yButton';
import CLButton from '@codeandfunction/callaloo/CLButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div class="demo_inline_container rounded">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>Card with button</span>
        <CLButton :color="CLColors.Primary" data-expand-click-area>Action</CLButton>
      </div>
    </div>
  </CLA11yButton>
</template>

Props

Slots