Button Component

Buttons are effectively a call to the Rails helpers link_to, button_to or tag.button with some base styles applied.

Options

All are conditionally optional depending on the button type, but you must provide at least one of text or icon or some content as a block (see the other button preview for content block examble)

• href: The URL for the link or form action. Only used if element is link or form.
• text: Text to render inside the button. If this is empty, (and no content block is passed in) and an icon is given, the button will render as an icon-only button
• type: The type of button element. One of :link, :button, :form, :reset, or :submit. Defaults to link.
• modifiers: An array of CSS modifiers for the button to change its look. Available modifiers: ['primary', 'secondary', 'tertiary', 'full-width', 'sm' (small), 'danger']
• icon: The name of the icon to use. See the Material Icons for options. You can use any of the icons listed on that page, just downcase the name and replace the spaces with underscores (e.g. 'Chevron Right' -> 'chevron_right').
• icon_position: The position of the icon relative to the text. Options: ['left', 'right']. Defaults to 'left'.
• disabled: Whether the button is disabled. Defaults to false.

• method: Only used if element is form. Defaults to post.

• It also accepts all the usual HTML attributes for the chosen HTML type tage, e.g. id, class, data-, aria-label, onClick etc.

Example with link

<%= render DesignSystem::ButtonComponent.new(label: 'Join a club',
                                             href: '/join',
                                             class: 'cc-button--join-a-club',
                                             modifiers: [:primary, :foo],
                                             data: { event_action: :foo } ) %>

Produces:

<a class="rpf-button rpf-button--primary rpf-button--foo cc-button--join-a-club" data-event-action="foo" href="/join">
  Join a club
</a>

Example with icon

<%= render DesignSystem::ButtonComponent.new(label: 'Hello World', icon: 'sentiment_satisfied', type: :button ) %>

Produces:

<button class="rpf-button" type="button">
  <span class="rpf-button__icon material-symbols-sharp">sentiment_satisfied</span>
  Hello World
</button>

rubocop:disable Metrics/ParameterLists