- Accordion
- Alert
- Avatar PRO
- Avatar Group PRO
- Badge
- Blank Slate PRO
- Breadcrumb
- Breakpoint Debug PRO
- Button
- Button Group
- Callout PRO
- Card
- Carousel
- Close Button
- Container
- Copy to Clipboard PRO
- Divider PRO
- Dropdown
- Errors PRO
- Feed PRO
- Flash PRO
- Form Field PRO
- Header PRO
- Heading
- Heading with Anchor PRO
- List Group
- Modal
- Nav
- Navbar
- Offcanvas
- Pagination
- Pricing Panel PRO
- Progress
- Progress Circular PRO
- Rating Group PRO
- Ribbon PRO
- Spinner
- Stat PRO
- Stepper PRO
- Table
- Table of Contents PRO
- Team Member PRO
- Testimonial PRO
- Toast
Alert
Description
The Alert component provides contextual feedback messages to users, allowing for the display of informative or warning messages within a web application interface.
FREE
This component is available for free.
It implements the Bootstrap Alert component.
See the installation instructions below for more details.
Arguments
Name | Default | Type | Description |
---|---|---|---|
color
|
primary
|
String
|
The color variant of the alert component
Options: primary , secondary , success , danger , warning , info , light , dark
|
dismissable
|
false
|
Boolean
|
Show dismissible/close button in the component |
html_attributes
|
{}
|
Hash
|
Any attributes for the used html wrapper tag |
Examples
Default
<%= render Railsboot::AlertComponent.new do %>
A primary alert
<% end %>
<div class="alert alert-primary" role="alert">
A primary alert
</div>
Dismissible
<%= render Railsboot::AlertComponent.new(dismissible: true) do %>
A dismissible alert
<% end %>
<div class="alert alert-primary alert-dismissible fade show" role="alert">
A dismissible alert
<button data-bs-dismiss="alert" class="btn-close" aria-label="Close" type="button"></button>
</div>
Colors
<%= render Railsboot::AlertComponent.new(color: "primary").with_content("A primary alert") %>
<%= render Railsboot::AlertComponent.new(color: "secondary").with_content("A secondary alert") %>
<%= render Railsboot::AlertComponent.new(color: "success").with_content("A success alert") %>
<%= render Railsboot::AlertComponent.new(color: "danger").with_content("A danger alert") %>
<%= render Railsboot::AlertComponent.new(color: "warning").with_content("A warning alert") %>
<%= render Railsboot::AlertComponent.new(color: "info").with_content("A info alert") %>
<%= render Railsboot::AlertComponent.new(color: "light").with_content("A light alert") %>
<%= render Railsboot::AlertComponent.new(color: "dark").with_content("A dark alert") %>
<div class="alert alert-primary" role="alert">
A primary alert
</div>
<div class="alert alert-secondary" role="alert">
A secondary alert
</div>
<div class="alert alert-success" role="alert">
A success alert
</div>
<div class="alert alert-danger" role="alert">
A danger alert
</div>
<div class="alert alert-warning" role="alert">
A warning alert
</div>
<div class="alert alert-info" role="alert">
A info alert
</div>
<div class="alert alert-light" role="alert">
A light alert
</div>
<div class="alert alert-dark" role="alert">
A dark alert
</div>
Installation
Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:
- A parent component class (
app/components/railsboot/component.rb
) of which all components inherit from. - A base component class (
app/components/railsboot/base_component.rb
) which is used for rendering internally. - The desired component itself (
app/components/railsboot/alert_component.rb
). - A view template (
app/components/railsboot/alert_component.html.erb
) for the component unless it's rendered inline. - Any other dependent components such as Slots (just if the component needs those)
- Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
- A test file for the components (
test/components/railsboot/alert_component_test.rb
) including potential slot or dependency tests.
For more information please refer to the installation section.