Button
RippleUI comes with a button component that can be used to trigger actions.
Default
Simple example of button.
HTML
JSX
<button class="btn">Default</button>
Colors
Button colors.
HTML
JSX
<button class="btn btn-primary">Default</button><button class="btn btn-secondary">Default</button><button class="btn btn-success">Default</button><button class="btn btn-error">Default</button><button class="btn btn-warning">Default</button>
Outline
Button outline.
HTML
JSX
<button class="btn btn-outline-primary">Default</button><button class="btn btn-outline-secondary">Default</button><button class="btn btn-outline-success">Default</button><button class="btn btn-outline-error">Default</button><button class="btn btn-outline-warning">Default</button>
Solid
Button solid.
HTML
JSX
<button class="btn btn-solid-primary">Default</button><button class="btn btn-solid-secondary">Default</button><button class="btn btn-solid-success">Default</button><button class="btn btn-solid-error">Default</button><button class="btn btn-solid-warning">Default</button>
Ghost
Button ghost.
HTML
JSX
<button class="btn btn-ghost">Default</button>
Button Sizes
Button sizes.
HTML
JSX
<button class="btn btn-primary btn-xs">Small</button><button class="btn btn-primary btn-sm">Small</button><button class="btn btn-primary btn-md">Medium</button><button class="btn btn-primary btn-lg">Large</button><button class="btn btn-primary btn-xl">Large</button>
Button Rounded
Button rounded.
HTML
JSX
<button class="btn-rounded btn btn-primary">Default</button><button class="btn btn-circle"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
Button Block
Button block.
HTML
JSX
<button class="btn btn-primary btn-block">Default</button>
Loading
Button loading.
HTML
JSX
<button class="btn btn-loading">Default</button>
Button No Animation
Button No Animation
HTML
JSX
<button class="btn btn-primary btn-no-animation">Default</button>
Disabled
Button disabled.
HTML
JSX
<button class="btn" disabled>Default</button>
API
| class | Description |
|---|---|
| btn | Button base class |
| btn-primary | Set primary color |
| btn-secondary | Set secondary color |
| btn-success | Set success color |
| btn-error | Set error color |
| btn-warning | Set warning color |
| btn-outline-primary | Transparent background with border primary and hover effect |
| btn-outline-secondary | Transparent background with border Secondary and hover effect |
| btn-outline-success | Transparent background with border success and hover effect |
| btn-outline-error | Transparent background with border error and hover effect |
| btn-outline-warning | Transparent background with border warning and hover effect |
| btn-solid-primary | Set low blue background and high contrast text color |
| btn-solid-secondary | Set low purple background and high contrast text color |
| btn-solid-success | Set low green background and high contrast text color |
| btn-solid-error | Set low red background and high contrast text color |
| btn-solid-warning | Set low yellow background and high contrast text color |
| btn-solid-secondary | Set secondary color with no border and hover effect |
| btn-ghost | Transparent background with no border and hover effect |
| btn-loading | Add Loading spinner |
| btn-rounded | Set full rounded |
| btn-circle | Set circle |
| btn-block | Make button takes full width |
| btn-no-animation | Remove animation on press |
| btn-xs | Set extra small size |
| btn-sm | Set small size |
| btn-md | Set medium size |
| btn-lg | Set large size |
| btn-xl | Set extra large size |