Alert
Displays a callout for user attention.
Usage
Example
Pro tip
With RubyUI you'll ship faster.
Alert do rocket_icon AlertTitle { "Pro tip" } AlertDescription { "With RubyUI you'll ship faster." } end
Copied!
Copy failed!
Without icon
Pro tip
Simply, don't include an icon and your alert will look like this.
Alert do AlertTitle { "Pro tip" } AlertDescription { "Simply, don't include an icon and your alert will look like this." } end
Copied!
Copy failed!
Warning
Ship often
Shipping is good, your users will thank you for it.
Alert(variant: :warning) do info_icon AlertTitle { "Ship often" } AlertDescription { "Shipping is good, your users will thank you for it." } end
Copied!
Copy failed!
Destructive
Oopsie daisy!
Your design system is non-existent.
Alert(variant: :destructive) do alert_icon AlertTitle { "Oopsie daisy!" } AlertDescription { "Your design system is non-existent." } end
Copied!
Copy failed!
Success
Installation successful
You're all set to start using RubyUI in your application.
Alert(variant: :success) do check_icon AlertTitle { "Installation successful" } AlertDescription { "You're all set to start using RubyUI in your application." } end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Alert
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Alert
to app/components/ruby_ui/alert.rb
# frozen_string_literal: true module RubyUI class Alert < Base def initialize(variant: nil, **attrs) @variant = variant super(**attrs) # must be called after variant is set end def view_template(&) div(**attrs, &) end private def colors case @variant when nil "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80" when :warning "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80" when :success "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80" when :destructive "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80" end end def default_attrs base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8" { class: [base_classes, colors] } end end end
Copied!
Copy failed!
2
Add RubyUI::AlertDescription
to app/components/ruby_ui/alert/alert_description.rb
# frozen_string_literal: true module RubyUI class AlertDescription < Base def view_template(&) div(**attrs, &) end private def default_attrs { class: "text-sm [&_p]:leading-relaxed" } end end end
Copied!
Copy failed!
3
Add RubyUI::AlertTitle
to app/components/ruby_ui/alert/alert_title.rb
# frozen_string_literal: true module RubyUI class AlertTitle < Base def view_template(&) h5(**attrs, &) end private def default_attrs { class: "mb-1 font-medium leading-none tracking-tight" } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Alert | Phlex | |
AlertDescription | Phlex | |
AlertTitle | Phlex |