RPF Design System for Rails
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="rpf-alert rpf-alert--error">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
    <h3 class="rpf-alert__title">Action and close alert</h3>
    <div class="rpf-alert__close"><button class="rpf-button rpf-button--sm rpf-button--tertiary rpf-button--icon-only"><span class="rpf-button__icon material-symbols-sharp">close</span></button></div>
  </div>
  <div class="rpf-alert__body">
    <div class="rpf-alert__text">
      <div class="rpf-markdown">
        <p>Some important text with an <a href="https://www.example.com">important link</a>.</p>
      </div>
    </div>
    <div class="rpf-alert__actions"><a class="rpf-button rpf-button--sm rpf-button--tertiary" href="#">Action 1</a><a class="rpf-button rpf-button--sm rpf-button--tertiary" href="#">Action 2</a></div>
  </div>
</div>
1
2
3
4
5
render DesignSystem::AlertComponent.new(title:, text:) do |c|
  c.with_action(text: 'Action 1', href: '#', type: :link)
  c.with_action(text: 'Action 2', href: '#', type: :link)
  c.with_close_button
end

Alert Component with actions and a close button

This example is just to show you can add both actions and a close button. (See source tab for the code). In the source, the close button is at the end, but you can add it anywhere in the block - the order of actions and close button is irrelevant - just use the correct with_ syntax for the correct item.

Param Description Input

Alert title - bold text at the top of the alert

The content of the alert (markdown)