Reference

Page layouts

The shape a whole page takes.

bc_page_sidebar() bc_sidebar_toggle()

A collapsible bc_sidebar() beside a <main> region, with a header carrying the sidebar toggle and a title.
bc_nav_item() bc_page_navbar()

A sticky top navigation bar over a <main> region.
bc_page()

For servers that answer with HTML text rather than tags, like plumber2, ambiorix or nanonext. Writes the doctype, the head and the body, with the stylesheet and every script the components asked for already linked.

Serving Basecoat

The stylesheet and scripts a page needs.

bc_deps()

The Basecoat stylesheet and scripts as an htmltools::htmlDependency(), placed in the page <head>. Served from the files bundled with this package by default, or from jsDelivr.
bc_styles

The style packs Basecoat ships, as named on its installation page. All of them are bundled with this package.
bc_theme()

A CSS file of your own as an htmltools::htmlDependency(). Reach for bc_deps(theme = ) instead, which orders it against the style pack for you.
bc_init()

Basecoat initialises its components on load and when new DOM is inserted, so this is only wanted where markup is restored from a cache rather than parsed.
bc_shiny_deps()

JavaScript bindings that let a Shiny app read and update the basecoat inputs Shiny cannot already: bc_radio_group(), bc_slider(), bc_select() and bc_combobox().
print.bc_tag

Prints a component to the viewer with the Basecoat stylesheet and scripts attached, or writes its HTML when there is nowhere to show it.

Layout

Regions that hold other components.

bc_card() bc_card_action() bc_card_body() bc_card_footer() bc_card_header()

A titled container, built from a header, a body and a footer.
bc_sidebar() bc_sidebar_group() bc_sidebar_item() bc_sidebar_separator() bc_sidebar_submenu()

A fixed navigation panel beside the page content.
bc_scroll_area()

A scrollable region carrying the Basecoat scrollbar or scrollbar-sm class.
bc_item() bc_item_group()

A display or navigation row in a semantic <article> or <a> element.
bc_empty()

A centred empty-state with an optional icon, title, description and actions.

Actions

Controls that do something when clicked.

bc_button()

A <button> carrying the Basecoat btn class.
bc_button_group() bc_button_group_separator()

Joins related controls into a single button-group shell.
bc_dropdown_checkbox() bc_dropdown_group() bc_dropdown_item() bc_dropdown_menu() bc_dropdown_radio() bc_dropdown_separator()

A menu of actions in an inline popover beside its trigger.
bc_command() bc_command_group() bc_command_item() bc_command_separator()

A searchable command palette or standalone command list.
bc_pagination() bc_pagination_ellipsis() bc_pagination_item() bc_pagination_next() bc_pagination_previous()

A set of page controls built from the Button classes in a nav landmark.
bc_theme_switcher()

A button that flips the dark class on <html>, toggling the page theme.

Inputs

Form controls and the field wrappers around them.

bc_field() bc_field_group() bc_field_separator() bc_fieldset()

A single form control wrapped with its label and helper text.
bc_label()

A <label> carrying the Basecoat label class.
bc_input()

An <input> carrying the Basecoat input class, optionally wrapped with a label in a field.
bc_input_group() bc_input_group_addon()

A group shell for a native control with inline or block addons.
bc_textarea()

A multiline <textarea> carrying the Basecoat textarea class, optionally wrapped with a label in a field.
bc_checkbox()

A checkbox input paired with its label in a Basecoat field.
bc_radio()

A single radio input with its label, wrapped in a field.
bc_radio_group()

A radio group component with individual radio inputs.
bc_switch()

A binary toggle built on a native checkbox with role="switch", paired with its label in a horizontal field.
bc_slider()

A range input component styled as a slider.
bc_select()

A dropdown of options, with a hidden input carrying what was chosen.
bc_select_option()

A helper function to create individual select options.
bc_native_select() bc_native_select_group() bc_native_select_option()

A native <select> carrying the Basecoat select class, optionally wrapped with a label in a field.
bc_combobox()

A searchable select with an editable text input and a hidden value input.
bc_combobox_option()

A selectable entry in a combobox listbox.
bc_combobox_group()

A headed set of options separated from the rest of the list.
bc_combobox_separator()

A horizontal rule between combobox groups.

Moving between views.

bc_tabs()

A tab component with navigation and content panels.
bc_tab()

A helper function to create individual tab content panels.
bc_breadcrumb() bc_breadcrumb_item() bc_breadcrumb_separator()

A navigation landmark listing the page hierarchy, with separators inserted between items.

Overlays

Content layered over the page.

bc_dialog() bc_dialog_close()

A modal dialog component using native HTML dialog element.
bc_dialog_trigger()

A button that opens a dialog.
bc_alert_dialog()

A modal that interrupts the user and expects an explicit response, built on a native <dialog class="alert-dialog">.
bc_drawer()

A modal side panel built on a native <dialog> element.
bc_popover()

An inline popover of content beside its trigger.
bc_tooltip()

A tooltip component using Basecoat CSS.
bc_toast() bc_toast_trigger() bc_toaster()

A stack of transient notifications appended to a toaster.

Display

Components that show state rather than collect it.

bc_alert()

A short message with an optional icon, title, body and action.
bc_avatar() bc_avatar_badge() bc_avatar_group()

A small round image with an initials fallback.
bc_badge()

A small inline status label.
bc_kbd()

A single key label in an inline <kbd>.
bc_progress()

A bar showing how far along a task is.
bc_skeleton()

A block that stands in for content that has not arrived.
bc_spinner()

A loading indicator as the loader-circle Lucide icon with the animate-spin utility.
bc_accordion() bc_accordion_item()

A vertically stacked set of collapsible sections built on native <details> elements.

Misc

bc_theme_builder()

A page for building a theme: an input per token, a light and dark pair, a style pack to start from, and the CSS to download.