Reference

Page layouts

The shape a whole page takes.

• bc_page_sidebar() bc_sidebar_toggle()

  Create a page with a collapsible sidebar.

• bc_nav_item() bc_page_navbar()

  Create a page with a navbar.

• bc_page()

  Create a full HTML page as a string, for servers that send strings rather than tags, such as plumber2, ambiorix, or nanonext. The page loads the stylesheet and the scripts your components need.

Serving Basecoat

The stylesheet and scripts a page needs.

• bc_deps()

  Load the Basecoat stylesheet and scripts into a page. Files come from this package by default, or from jsDelivr.

• bc_styles

  The bundled style packs.

• bc_theme()

  Load a CSS file of your own as an htmltools::htmlDependency(). Prefer the theme argument of bc_deps(), which loads it after the style pack for you.

• bc_init()

  Create a script that sets up Basecoat components again. Components set themselves up on page load and when new content is added. Use this when content comes back from a cache instead.

• bc_shiny_deps()

  Load Basecoat in a Shiny app. This calls bc_deps() and additionally lets your Shiny app read and update bc_radio_group(), bc_slider(), bc_select(), bc_combobox(), and bc_accordion().

• bc_update_accordion() bc_update_combobox() bc_update_dialog() bc_update_radio_group() bc_update_select() bc_update_sidebar() bc_update_slider() bc_update_theme_switcher()

  Change the value of a basecoat input from the server of a Shiny app. The page needs bc_shiny_deps() for these to have any effect.

• bc_show_toast()

  Show a toast from the server of a Shiny app. The page needs a bc_toaster() for the toast to appear in.

• print.bc_tag

  Show a component in the viewer with the Basecoat stylesheet and scripts. Outside an interactive session, print its HTML instead.

Layout

Regions that hold other components.

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

  Create a card with a header, a body, and a footer.

• bc_sidebar() bc_sidebar_group() bc_sidebar_item() bc_sidebar_separator() bc_sidebar_submenu()

  Create a collapsible sidebar for navigation.

• bc_scroll_area()

  Create a scrollable area with a styled scrollbar.

• bc_item() bc_item_group()

  Create a row of content with an optional icon, text, and actions.

• bc_empty()

  Create a centred empty state with an optional icon, title, description and actions.

Actions

Controls that do something when clicked.

• bc_button()

  Create a button.

• bc_button_group() bc_button_group_separator()

  Create a group of related buttons joined into one control.

• bc_dropdown_checkbox() bc_dropdown_group() bc_dropdown_item() bc_dropdown_menu() bc_dropdown_radio() bc_dropdown_separator()

  Create a menu of actions that opens from a button.

• bc_command() bc_command_group() bc_command_item() bc_command_separator()

  Create a searchable command menu, inline or in a modal.

• bc_pagination() bc_pagination_ellipsis() bc_pagination_item() bc_pagination_next() bc_pagination_previous()

  Create a row of page links.

• bc_theme_switcher()

  Create a button that switches the page between light and dark mode.

Inputs

Form controls and the field wrappers around them.

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

  Create a form field that groups a control with its label and helper text.

• bc_label()

  Create a label for a form control.

• bc_input()

  Create a text input with an optional label and helper text.

• bc_input_group() bc_input_group_addon()

  Create an input with addons such as icons, buttons, or text.

• bc_textarea()

  Create a multiline text input with an optional label.

• bc_checkbox()

  Create a checkbox with a label.

• bc_radio()

  Create a radio button with a label.

• bc_radio_group()

  Create a set of radio buttons where the user selects one.

• bc_switch()

  Create an on and off toggle with a label. It submits like a checkbox.

• bc_slider()

  Create a slider for selecting a number.

• bc_select()

  Create a dropdown for selecting one or more options.

• bc_select_option()

  Create one option for bc_select().

• bc_native_select() bc_native_select_group() bc_native_select_option()

  Create a browser-native select with an optional label and helper text.

• bc_combobox()

  Create a select you type into to filter its options.

• bc_combobox_option()

  Create one choice in a combobox.

• bc_combobox_group()

  Create a titled group of combobox options.

• bc_combobox_separator()

  Create a divider between combobox groups.

Navigation

Moving between views.

• bc_tabs()

  Create a set of tabbed panels. The first tab starts selected.

• bc_tab()

  Create one tab and its panel, for bc_tabs().

• bc_breadcrumb() bc_breadcrumb_item() bc_breadcrumb_separator()

  Create a trail of links from the top of the site to the current page.

Overlays

Content layered over the page.

• bc_dialog() bc_dialog_close()

  Create a modal dialog with a title, content, and actions.

• bc_dialog_trigger()

  Create a button that opens a dialog.

• bc_alert_dialog()

  Create a modal dialog that asks the user to confirm or cancel.

• bc_drawer()

  Create a modal panel that slides in from the edge of the screen.

• bc_popover()

  Create a panel of content that opens from a button.

• bc_tooltip()

  Create text that shows when you hover over or focus an element.

• bc_toast() bc_toast_trigger() bc_toaster()

  Create a short notification shown in a bc_toaster().

Display

Components that show state rather than collect it.

• bc_alert()

  Create a short message with an optional icon, title, body, and action.

• bc_avatar() bc_avatar_badge() bc_avatar_group()

  Create a small round image with an initials fallback.

• bc_badge()

  Create a small inline status label.

• bc_kbd()

  Create a keyboard key label.

• bc_progress()

  Create a bar that shows how far along a task is.

• bc_skeleton()

  Create a placeholder block shown while content loads.

• bc_spinner()

  Create a spinning icon that shows something is loading.

• bc_accordion() bc_accordion_item()

  Create a stack of collapsible sections.

Misc

• bc_theme_builder()

  Create an HTML page where you build a light and dark theme and download it as CSS.