Split Button

Stable

A container of 1 primary button and 1 secondary button that can open a Dropdown

<script setup lang="ts">
import { HSplitButton } from '@holistics/design-system'
</script>

<template>
  <HSplitButton
    type="primary-highlight"
    left-button="Add Filter"
    :right-dropdown="[
      { key: 'add-date-drill', label: 'Add Date Drill' },
      { key: 'add-period-comparision', label: 'Add Period Comparison' },
    ]"
  />
</template>

Examples

Types

<script setup lang="ts">
import { BUTTON_TYPES, HSplitButton } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HSplitButton
      v-for="type in BUTTON_TYPES"
      :key="type"
      :type="type"
      left-button="Add Filter"
      :right-dropdown="[
        { key: 'add-date-drill', label: 'Add Date Drill' },
        { key: 'add-period-comparision', label: 'Add Period Comparison' },
      ]"
    />
  </div>
</template>

Sizes

<script setup lang="ts">
import { BUTTON_SIZES, HSplitButton } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HSplitButton
      v-for="size in BUTTON_SIZES"
      :key="size"
      type="primary-highlight"
      :size="size"
      left-button="Add Filter"
      :right-dropdown="[
        { key: 'add-date-drill', label: 'Add Date Drill' },
        { key: 'add-period-comparision', label: 'Add Period Comparison' },
      ]"
    />
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
rightDropdown *	DropdownProps | Readonly<DropdownOption>[]
leftButton *	string | ButtonPropsPreTyped
type *	"primary-highlight" | "secondary-default" | "tertiary-highlight" | "tertiary-default" | "primary-danger" | "tertiary-danger" | "primary-warning" | "primary-success" | "outline-danger" | ... 5 more ... | "clear-danger"
size	"sm" | "md" | "lg" = "md"
rightButton	ButtonPropsPreTyped

Events

Name	Parameters	Description
@leftClick	[event: MouseEvent]
@rightSelect	[option: DropdownOption]