CODEWITHSUNDEEP
htmlcssrshiny
Rorschach
Rorschach

Reputation: 32426

Change size of actionButton and its label

How can I make an actionButton and its label smaller, but still centered in the button icon? I have been able to accomplish making both the button and the text smaller, but the result is a small button with small text that isn't centered in the button. I think I'm probably approaching this incorrectly. Here is an example where the button/text gets smaller but the result is a button with the text not centered.

library(shiny)

shinyApp(
    shinyUI(fluidPage(
        inputPanel(
            ## Original
            actionButton('button', 'Hi'),

            ## Text is smaller
            gsub('Hi', '<font size="1">Hi</font>',
                 actionButton('button1', 'Hi')),

            ## Text is smaller and button is smaller, but text is outside of button
            gsub('Hi', '<font size="1" align="center">Hi</font>',
                 actionButton('button2', 'Hi', style='height:20px'))
            )
    )),
    shinyServer(function(input,output){})
)

Upvotes: 18

Views: 20551

Answers (1)

MrFlick
MrFlick

Reputation: 206197

You should really just focus on the HTML and CSS here. There's nothing that's really R and shiny specific here. An actionButton is just an HTML <button>. You can set properties for font-size and padding (the space around the text).

Here's one way to reduce the padding and decrease the font-size

actionButton('button2', 'Hi', style='padding:4px; font-size:80%'))

Upvotes: 28

Related Questions