DropdownButton

Basic

<c-bs-dropdown-button title="Dropdown button" variant="secondary">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Something else here</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Primary

<c-bs-dropdown-button title="Primary" variant="primary">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Success

<c-bs-dropdown-button title="Success" variant="success">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Danger

<c-bs-dropdown-button title="Danger" variant="danger">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Warning

<c-bs-dropdown-button title="Warning" variant="warning">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Info

<c-bs-dropdown-button title="Info" variant="info">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Light

<c-bs-dropdown-button title="Light" variant="light">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Variant Dark

<c-bs-dropdown-button title="Dark" variant="dark">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Size Large

<c-bs-dropdown-button title="Large button" variant="secondary" size="lg">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Size Small

<c-bs-dropdown-button title="Small button" variant="secondary" size="sm">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Dark Menu

<c-bs-dropdown-button title="Dropdown" variant="secondary" c-dark="True">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

<c-bs-dropdown-button title="Dropdown" variant="secondary" align="end">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-button>

Preview:

Basic Split Button

<c-bs-split-button title="Primary" variant="primary">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Something else here</c-bs-dropdown-item>
  <c-bs-dropdown-divider />
  <c-bs-dropdown-item href="#">Separated link</c-bs-dropdown-item>
</c-bs-split-button>

Preview:

Split Button Danger

<c-bs-split-button title="Danger" variant="danger">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
  <c-bs-dropdown-divider />
  <c-bs-dropdown-item href="#">Separated link</c-bs-dropdown-item>
</c-bs-split-button>

Preview:

Split Button Success

<c-bs-split-button title="Success" variant="success">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-split-button>

Preview:

Split Button Large

<c-bs-split-button title="Large button" variant="primary" size="lg">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-split-button>

Preview:

Split Button Small

<c-bs-split-button title="Small button" variant="secondary" size="sm">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-split-button>

Preview:

Split Button Custom Toggle Label

<c-bs-split-button title="Action" variant="primary" toggle_label="Custom toggle">
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-split-button>

Preview: