RPF Design System for Rails
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<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 alert</h3>
  </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
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)
end

Alert Component with actions

Produces an alert component, with a title and optional additional content, close button, and action buttons. Add the actions as a block using with_action for each action buttons as shown in example below. These are based on the DesignSystem::Button, but will always be rendered with the tertiary style. Any other attributes can be passed in to the action buttons, such as an id or data attributes.

Options

  • see default for all options

    example with actions:

    DesignSystem::AlertComponent.new(title: 'Action alert', type: 'information') do |c|
    c.with_action(text: 'Special action 1', href: '#', type: :link)
    c.with_action(text: 'Special action 2', href: '#', type: :link)
    end

    produces:

    <div class="rpf-alert rpf-alert--aye rpf-alert--information">
    <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
    <h3 class="rpf-alert__title">Action alert</h3>
    </div>
    <div class="rpf-alert__body">
    <div class="rpf-alert__actions">
      <a class="rpf-button rpf-button--sm rpf-button--tertiary" href="#">Special action 1</a>
      <a class="rpf-button rpf-button--sm rpf-button--tertiary" href="#">Special action 2</a>
    </div>
    </div>
    </div>

  • It also accepts all the usual HTML attributes for a div tag, e.g. id, class, data- etc.

Param Description Input

Alert title - bold text at the top of the alert

The content of the alert (markdown)