cla-button

The Button component.

Bootstrap buttons as a web component.

Usage

<!-- Default -->
<cla-button>Default</cla-button>

<!-- Colors -->
<cla-button color="primary">Primary</cla-button>
<cla-button color="secondary">Secondary</cla-button>
<cla-button color="success">Success</cla-button>
<cla-button color="danger">Danger</cla-button>
<cla-button color="warning">Warning</cla-button>
<cla-button color="info">Info</cla-button>
<cla-button color="light">Light</cla-button>
<cla-button color="dark">Dark</cla-button>
<cla-button color="link">Link</cla-button>

<!-- Disabled -->
<cla-button color="primary" disabled>Primary</cla-button>
<cla-button color="secondary" disabled>Secondary</cla-button>
<cla-button color="success" disabled>Success</cla-button>
<cla-button color="danger" disabled>Danger</cla-button>
<cla-button color="warning" disabled>Warning</cla-button>
<cla-button color="info" disabled>Info</cla-button>
<cla-button color="light" disabled>Light</cla-button>
<cla-button color="dark" disabled>Dark</cla-button>
<cla-button color="link" disabled>Link</cla-button>

<!-- Outline -->
<cla-button color="primary" outline>Primary</cla-button>
<cla-button color="secondary" outline>Secondary</cla-button>
<cla-button color="success" outline>Success</cla-button>
<cla-button color="danger" outline>Danger</cla-button>
<cla-button color="warning" outline>Warning</cla-button>
<cla-button color="info" outline>Info</cla-button>
<cla-button color="light" outline>Light</cla-button>
<cla-button color="dark" outline>Dark</cla-button>
<cla-button color="link" outline>Link</cla-button>

<!-- Sizes -->
<cla-button color="primary" size="small">Primary Small</cla-button>
<cla-button color="secondary" size="small">Secondary Small</cla-button>
<cla-button color="success" size="large">Success Large</cla-button>
<cla-button color="danger" size="large">Danger Large</cla-button>

<cla-button color="secondary" size="small" block>Secondary Small Block</cla-button>
<cla-button color="success" block>Success Block</cla-button>
<cla-button color="danger" block>Danger Large Block</cla-button>

<!-- Forms -->
<form action="#" method="get">
  <input type="text" name="text"/>
  <cla-button type="submit" color="primary" name="submit" value="submit">Submit</cla-button>
  <cla-button type="reset" color="secondary">Reset</cla-button>
</form>

Properties

Property Attribute Description Type Default
block block Whether to use the block style variant of the button. This makes the button full width within its container. boolean undefined
color color The button color. "danger" | "dark" | "info" | "light" | "link" | "primary" | "secondary" | "success" | "warning" undefined
disabled disabled Whether the button is disabled. boolean false
name name The button name. string undefined
outline outline Whether to use the outline style variant of the button. This removes the background from the button when it's not hovered. boolean false
size size The button size. "default" | "large" | "small" | "xsmall" 'default'
type type The button type. "button" | "reset" | "submit" 'button'
value value The button value. any undefined

Slots

Slot Description
Content placed inside the button.

Built with StencilJS

UI Components