Undo and redo buttons — rewind

These two buttons connect to the history of the session. They become enabled and disabled as the history permits. You thus do not have to write an observer on the server.

Usage

rewind_buttons(
  undo_label = "Undo",
  redo_label = "Redo",
  class = NULL,
  button_class = NULL
)

Arguments

undo_label, redo_label: The button labels. Use NULL for a button with an icon only. The function then sets the accessible name (aria-label) to "Undo" or "Redo". A screen reader can thus announce the button correctly when it has no text.
class: More CSS classes for the container element.
button_class: More CSS classes for the two buttons. Use it for a Bootstrap variant such as "btn-primary" or "btn-outline-secondary", and for a size such as "btn-sm".

Value

A htmltools::tagList().

Appearance

The buttons carry btn btn-default, so a Bootstrap theme applies to them without any work. Use button_class to give them a different Bootstrap variant, size or shape:

rewind_buttons(button_class = "btn-primary")
rewind_buttons(button_class = "btn-outline-secondary btn-sm")

A variant that you add wins over btn-default, so the buttons take the colours of the theme of your application. bslib::bs_theme() decides what those colours are. rewind thus has no colours of its own to keep in agreement with your application.

Examples

rewind_buttons()
#> <div class="rewind-buttons">
#>   <button type="button" class="btn btn-default rewind-undo" disabled title="Undo (Ctrl+Z)" aria-label="Undo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M5.5 3 2.5 6l3 3"></path>
#>       <path d="M2.5 6h7a3.5 3.5 0 0 1 0 7H6"></path>
#>     </svg>
#>     <span class="rewind-label">Undo</span>
#>   </button>
#>   <button type="button" class="btn btn-default rewind-redo" disabled title="Redo (Ctrl+Shift+Z or Ctrl+Y)" aria-label="Redo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M10.5 3 13.5 6l-3 3"></path>
#>       <path d="M13.5 6h-7a3.5 3.5 0 0 0 0 7H10"></path>
#>     </svg>
#>     <span class="rewind-label">Redo</span>
#>   </button>
#> </div>
rewind_buttons(undo_label = NULL, redo_label = NULL)
#> <div class="rewind-buttons">
#>   <button type="button" class="btn btn-default rewind-undo" disabled title="Undo (Ctrl+Z)" aria-label="Undo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M5.5 3 2.5 6l3 3"></path>
#>       <path d="M2.5 6h7a3.5 3.5 0 0 1 0 7H6"></path>
#>     </svg>
#>   </button>
#>   <button type="button" class="btn btn-default rewind-redo" disabled title="Redo (Ctrl+Shift+Z or Ctrl+Y)" aria-label="Redo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M10.5 3 13.5 6l-3 3"></path>
#>       <path d="M13.5 6h-7a3.5 3.5 0 0 0 0 7H10"></path>
#>     </svg>
#>   </button>
#> </div>
rewind_buttons(button_class = "btn-outline-primary btn-sm")
#> <div class="rewind-buttons">
#>   <button type="button" class="btn btn-default btn-outline-primary btn-sm rewind-undo" disabled title="Undo (Ctrl+Z)" aria-label="Undo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M5.5 3 2.5 6l3 3"></path>
#>       <path d="M2.5 6h7a3.5 3.5 0 0 1 0 7H6"></path>
#>     </svg>
#>     <span class="rewind-label">Undo</span>
#>   </button>
#>   <button type="button" class="btn btn-default btn-outline-primary btn-sm rewind-redo" disabled title="Redo (Ctrl+Shift+Z or Ctrl+Y)" aria-label="Redo">
#>     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="rewind-icon" aria-hidden="true" focusable="false">
#>       <path d="M10.5 3 13.5 6l-3 3"></path>
#>       <path d="M13.5 6h-7a3.5 3.5 0 0 0 0 7H10"></path>
#>     </svg>
#>     <span class="rewind-label">Redo</span>
#>   </button>
#> </div>