Skip to content

Conversation

@elnelson575
Copy link
Contributor

@elnelson575 elnelson575 commented Nov 3, 2025

Fixes #1247

Adds a toolbar that can hold a variety of UI inputs, buttons, and elements.

Toolbars generally contain small versions of inputs meant to fit in the headers/footers of cards, under cards, and other places you might want slimline versions of input components.

Examples:

Card with header toolbar (right), footer toolbar (left), and sub-card footer (left) Screenshot 2025-11-14 at 9 40 23 AM

Card header: Right aligned
Card footer (only on card 1): Left aligned
Sub-card: Left aligned

library(shiny)
library(bslib)

ui <- page_fillable(
    tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
    ),
    card(
        card_header(
            icon("star"),
            "Card 1 header",
            toolbar(
                align = "right",
                actionButton("go", label = "Go", class = "btn-sm"),
                actionButton(
                    "edit",
                    NULL,
                    icon = icon("pencil"),
                    class = "btn-sm"
                ),
                actionButton(
                    "calendar",
                    label = "Schedule",
                    icon = icon("calendar"),
                    class = "btn-sm"
                )
            )
        ),
        p("Card 1 body"),
        sliderInput("slider", "Slider", 0, 10, 5),
        max_height = "500px",
        card_footer(
            toolbar(
                align = "left",
                actionButton(
                    "paragraph",
                    NULL,
                    icon = icon("paragraph"),
                    class = "btn-sm"
                )
            ),
        )
    ),
    toolbar(
        align = "left",
        actionButton("test2", NULL, icon = icon("star"), class = "btn-sm"),
        actionButton("love2", NULL, icon = icon("heart"), class = "btn-sm"),
        actionButton("comment2", NULL, icon = icon("comment"), class = "btn-sm")
    ),
    card(
        card_header(
            "Card 2 header",
            toolbar(
                align = "right",
                downloadLink("download", "Download", class = "btn-sm"),
                selectInput("select", NULL, choices = c("A", "B", "C"))
            )
        ),
        p("Card 2 body"),
        sliderInput("slider2", "Slider", 0, 10, 5),
        max_height = "500px",
        card_footer(
            toolbar(
                align = "right",
                actionButton(
                    "paragraph2",
                    NULL,
                    icon = icon("paragraph"),
                    class = "btn-sm"
                )
            )
        )
    ),
    toolbar(
        align = "left",
        actionButton("test", NULL, icon = icon("star"), class = "btn-sm"),
        actionButton("love", NULL, icon = icon("heart"), class = "btn-sm"),
        actionButton("comment", NULL, icon = icon("comment"), class = "btn-sm")
    ),
)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

</details>

@CLAassistant
Copy link

CLAassistant commented Nov 3, 2025

CLA assistant check
All committers have signed the CLA.

elnelson575 and others added 4 commits November 5, 2025 17:10
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
@elnelson575 elnelson575 linked an issue Nov 12, 2025 that may be closed by this pull request
@elnelson575 elnelson575 marked this pull request as ready for review November 14, 2025 14:47
elnelson575 and others added 4 commits November 17, 2025 11:38
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Copy link
Member

@gadenbuie gadenbuie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, this looks like a good foundation for the rest of the toolbar component work. Just two small things to fixup in the tests and you're ready to merge into the toolbar epic branch.

@elnelson575 elnelson575 merged commit 769a8fd into feat/toolbar-epic Nov 18, 2025
1 check passed
@elnelson575 elnelson575 deleted the feat/toolbar-container branch November 18, 2025 01:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toolbar: Toolbar Div

4 participants