button_tag

Creates a button element that defines a submit button, reset button or a generic button which can be used in JavaScript, for example. You can use the button tag as a regular submit tag but it isn’t supported in legacy browsers. However, the button tag does allow for richer labels such as images and emphasis, so this helper will also accept a block. By default, it will create a button tag with type submit, if type is not given.

Options

• :data - This option can be used to add custom data attributes.

• :disabled - If true, the user will not be able to use this input.

• Any other key creates standard HTML options for the tag.

Examples

button_tag
# => <button name="button" type="submit">Button</button>

button_tag 'Reset', type: 'reset'
# => <button name="button" type="reset">Reset</button>

button_tag 'Button', type: 'button'
# => <button name="button" type="button">Button</button>

button_tag 'Reset', type: 'reset', disabled: true
# => <button name="button" type="reset" disabled="disabled">Reset</button>

button_tag(type: 'button') do
  content_tag(:strong, 'Ask me!')
end
# => <button name="button" type="button">
#     <strong>Ask me!</strong>
#    </button>

Deprecated: Rails UJS attributes

Prior to Rails 7, Rails shipped with a JavaScript library called @rails/ujs on by default. Following Rails 7, this library is no longer on by default. This library integrated with the following options:

• confirm: 'question?' - If present, the unobtrusive JavaScript drivers will provide a prompt with the question specified. If the user accepts, the form is processed normally, otherwise no action is taken.

• :disable_with - Value of this parameter will be used as the value for a disabled version of the submit button when the form is submitted. This feature is provided by the unobtrusive JavaScript driver.

  button_tag “Save”, data: { confirm: “Are you sure?” } # => <button name=“button” type=“submit” data-confirm=“Are you sure?”>Save</button>

  button_tag “Checkout”, data: { disable_with: “Please wait…” } # => <button data-disable-with=“Please wait…” name=“button” type=“submit”>Checkout</button>