Looking to Customize Appearance of Buttons in R Shiny

Question

I'm not satisfied with the appearance of the default action buttons in the Shiny App I'm working on. Some sample code is included below. I'm not sure where to begin with learning how to adjust the HTML and CSS aspects of Shiny in order to achieve what I want.

I'm looking for suggestions as to how to improve the layout of these buttons.

Here is what the buttons look like by default.

Here is how I would like the buttons to be arranged.

Working sample code included:

    library(shiny)
    library(shinydashboard)

    # UI ----------------------------------------------------------------------

    # Header
    Header <-
      dashboardHeader(  )



    # Sidebar
    Sidebar <-
      dashboardSidebar(
        # / Sidebar Inputs ----

        # Date Slider
        dateRangeInput(
          "Date_Range",
          label = "Date Range",
          start = Sys.time(),
          end = Sys.time(),
          startview = "year"),

        # Date Buttons
        fluidRow(
          column(4,
                 align = "left",
                 offset = 1,
                 actionButton("Last_Month",
                              label = "Last Month")),

          column(4,
                 align = "right",
                 offset = 1,
                 actionButton("Default_Dates",
                              label = "All Dates"))),

        fluidRow(
          column(4,
                 align = "left",
                 offset = 1,
                 actionButton("Three_Months",
                              label = "Last 3 Months"))),

        fluidRow(
          column(4,
                 align = "right",
                 offset = 1,
                 actionButton("Six_Months",
                              label = "Last 6 Months")))
        )



    # Body
    Body <-
      dashboardBody(  )



    # UI
    UI <- dashboardPage(Header, Sidebar, Body)




    # Server ------------------------------------------------------------------
    Server <- function(input, output, session) { }

    # Run ---------------------------------------------------------------------
    shinyApp(UI, Server)

Answer 1

A quick revision -- use HTML to add line breaks, use the column widths to appropriately align, inject custom CSS into the page.

Some more work needs to be done to align everything properly.

library(shiny)
library(shinydashboard)

# UI ----------------------------------------------------------------------

# Header
Header <- dashboardHeader()



# Sidebar
Sidebar <-
  dashboardSidebar(
    # / Sidebar Inputs ----

    # Date Slider
    dateRangeInput(
      "Date_Range",
      label = "Date Range",
      start = Sys.time(),
      end = Sys.time(),
      startview = "year"),

    fluidPage(
    # Date Buttons
      fluidRow(
        column(12, align = "center",
               actionButton("Default_Dates", label = "All Dates", width = "100%"))
        ),

      fluidRow(
        column(3, align = "center",
               actionButton("Last_Month", label = HTML("<span style='font-size:0.75em;'>Last<br />Month</span>"))),

        column(3, align = "center",
               actionButton("Three_Months", label = HTML("<span style='font-size:0.75em;'>Last 3<br />Months</span>"))),

        column(3, align = "center",
             actionButton("Six_Months", label = HTML("<span style='font-size:0.75em;'>Last 6<br />Months</span>"))),

        column(3, align = "center",
               actionButton("YTD", label = HTML("<span style='font-size:0.75em;'>Year to<br />Date</span>")))
      )

    )
  )



# Body
Body <-
  dashboardBody(
    tags$head(
      tags$style(HTML(".col-sm-3 button {padding:5px;}"))
      )
  )



UI <- dashboardPage(Header, Sidebar, Body)




# Server ------------------------------------------------------------------
Server <- function(input, output, session) { }

# Run ---------------------------------------------------------------------
shinyApp(UI, Server)