Button

Variant Primary

<c-bs-button variant="primary">Primary</c-bs-button>

Preview:


Variant Secondary

<c-bs-button variant="secondary">Secondary</c-bs-button>

Preview:


Variant Success

<c-bs-button variant="success">Success</c-bs-button>

Preview:


Variant Danger

<c-bs-button variant="danger">Danger</c-bs-button>

Preview:


Variant Warning

<c-bs-button variant="warning">Warning</c-bs-button>

Preview:


Variant Info

<c-bs-button variant="info">Info</c-bs-button>

Preview:


Variant Light

<c-bs-button variant="light">Light</c-bs-button>

Preview:


Variant Dark

<c-bs-button variant="dark">Dark</c-bs-button>

Preview:


<c-bs-button variant="link">Link</c-bs-button>

Preview:


Outline Primary

<c-bs-button variant="primary" c-outline="True">Primary</c-bs-button>

Preview:


Outline Secondary

<c-bs-button variant="secondary" c-outline="True">Secondary</c-bs-button>

Preview:


Size Large

<c-bs-button variant="primary" size="lg">Large button</c-bs-button>

Preview:


Size Small

<c-bs-button variant="primary" size="sm">Small button</c-bs-button>

Preview:


Disabled

<c-bs-button variant="primary" c-disabled="True">Disabled button</c-bs-button>

Preview:


<c-bs-button variant="primary" as_="a" href="#">Link</c-bs-button>

Preview:


<c-bs-button variant="primary" as_="a" href="#" c-disabled="True">Disabled link</c-bs-button>

Preview:


Active State

<c-bs-button variant="primary" c-active="True">Active button</c-bs-button>

Preview: