OrButton
A button is usually use to initialize some business logic when it's clicked.
Ornament has 3 button modes
- Solid
- Outline
- Text
And the buttons come in 4 different colors
- Primary
- Success
- Danger
- Info
Solid Buttons
html
<or-button>Primary Button</or-button>
<or-button class="success">Success Button</or-button>
<or-button class="danger">Danger Button</or-button>
<or-button class="info">Info Button</or-button><or-button>Primary Button</or-button>
<or-button class="success">Success Button</or-button>
<or-button class="danger">Danger Button</or-button>
<or-button class="info">Info Button</or-button>Outline Buttons
html
<or-button class="outline">Primary Button</or-button>
<or-button class="outline success">Success Button</or-button>
<or-button class="outline danger">Danger Button</or-button>
<or-button class="outline info">Info Button</or-button><or-button class="outline">Primary Button</or-button>
<or-button class="outline success">Success Button</or-button>
<or-button class="outline danger">Danger Button</or-button>
<or-button class="outline info">Info Button</or-button>Text Buttons
html
<or-button class="text">Primary Button</or-button>
<or-button class="text success">Success Button</or-button>
<or-button class="text danger">Danger Button</or-button>
<or-button class="text info">Info Button</or-button><or-button class="text">Primary Button</or-button>
<or-button class="text success">Success Button</or-button>
<or-button class="text danger">Danger Button</or-button>
<or-button class="text info">Info Button</or-button>Loading
The default loader type is pulse which renders the OrPulsingLoader Component the other value is circular which would render the OrCircularLoader Component
html
<or-button :is-loading="true">Button</or-button><or-button :is-loading="true">Button</or-button>Props
| Prop | Default | Type | Values | Description |
|---|---|---|---|---|
| size | "sm" | string | "sm", "md", "lg" | Constrols size of component |
| isLoading | false | boolean | true, false | Button loading state |
| loader | pulse | string | pulse, circular | Loader type |