Components

Drawer

A panel that slides in from any edge of the screen.

Usage

Basic

HTML

<bs:bsui-drawer position="right">
  <bs:bsui-drawer-trigger trigger_label="Open drawer" trigger_variant="outline" />
  <bs:bsui-drawer-backdrop />
  <bs:bsui-drawer-popup>
    <bs:bsui-text content="Edit profile" variant="title" tag="h3" />
    <bs:bsui-text content="Make changes to your profile here, then save when you are done." variant="muted" />
    <bs:bsui-field>
      <bs:bsui-field-label text="Name" />
      <bs:bsui-input defaultValue="Pedro Duarte" />
    </bs:bsui-field>
    <bs:bsui-field>
      <bs:bsui-field-label text="Username" />
      <bs:bsui-input defaultValue="@peduarte" />
    </bs:bsui-field>
    <bs:bsui-drawer-footer>
      <bs:bsui-drawer-close label="Save changes" variant="default" />
      <bs:bsui-drawer-close label="Close" variant="outline" />
    </bs:bsui-drawer-footer>
  </bs:bsui-drawer-popup>
</bs:bsui-drawer>

Confirm from a drawer

An alert dialog opened from inside the sheet, so the destructive branch is confirmed without losing the panel behind it.

HTML

<bs:bsui-drawer position="right">
  <bs:bsui-drawer-trigger trigger_label="Edit billing" trigger_variant="outline" />
  <bs:bsui-drawer-backdrop />
  <bs:bsui-drawer-popup>
    <bs:bsui-text content="Billing details" variant="title" tag="h3" />
    <bs:bsui-field>
      <bs:bsui-field-label text="Company" />
      <bs:bsui-input defaultValue="Northwind Ltd" />
    </bs:bsui-field>
    <bs:bsui-field>
      <bs:bsui-field-label text="VAT number" />
      <bs:bsui-input defaultValue="GB123456789" />
    </bs:bsui-field>
    <bs:bsui-drawer-footer>
      <bs:bsui-drawer-close label="Save billing details" variant="default" />
      <bs:bsui-alert-dialog>
        <bs:bsui-alert-dialog-trigger trigger_label="Discard changes" trigger_variant="ghost" />
        <bs:bsui-alert-dialog-backdrop />
        <bs:bsui-alert-dialog-popup>
          <bs:bsui-text content="Discard your edits?" variant="title" tag="h3" />
          <bs:bsui-text content="The company name and VAT number go back to what they were." variant="muted" />
          <bs:bsui-alert-dialog-footer>
            <bs:bsui-alert-dialog-close label="Keep editing" variant="outline" />
            <bs:bsui-alert-dialog-close label="Discard" variant="destructive" />
          </bs:bsui-alert-dialog-footer>
        </bs:bsui-alert-dialog-popup>
      </bs:bsui-alert-dialog>
    </bs:bsui-drawer-footer>
  </bs:bsui-drawer-popup>
</bs:bsui-drawer>

Bottom sheet

Position bottom turns the drawer into a sheet, here carrying the whole delivery slot form.

HTML

<bs:bsui-drawer position="bottom">
  <bs:bsui-drawer-trigger trigger_label="Choose delivery slot" />
  <bs:bsui-drawer-backdrop />
  <bs:bsui-drawer-popup>
    <bs:bsui-text content="Delivery window" variant="title" tag="h3" />
    <bs:bsui-radio-group defaultValue="afternoon">
      <bs:bsui-radio value="morning" label="Morning, 8 to 12" />
      <bs:bsui-radio value="afternoon" label="Afternoon, 12 to 17" />
      <bs:bsui-radio value="evening" label="Evening, 17 to 21" />
    </bs:bsui-radio-group>
    <bs:bsui-field>
      <bs:bsui-field-label text="Note for the driver" />
      <bs:bsui-textarea rows="3" placeholder="Leave it with the neighbour at number 14" />
    </bs:bsui-field>
    <bs:bsui-drawer-footer>
      <bs:bsui-drawer-close label="Confirm slot" variant="default" />
    </bs:bsui-drawer-footer>
  </bs:bsui-drawer-popup>
</bs:bsui-drawer>

Flush panel

Flush drops the popup padding so a striped table can run edge to edge under a floating close button.

HTML

<bs:bsui-drawer position="right">
  <bs:bsui-drawer-trigger trigger_label="Recent invoices" trigger_variant="outline" />
  <bs:bsui-drawer-backdrop />
  <bs:bsui-drawer-popup flush="true">
    <bs:bsui-drawer-close x="true" />
    <bs:bsui-table striped="true" sortable="false">
      <bs:bsui-table-header>
        <bs:bsui-table-header-cell columnId="invoice" label="Invoice" sortable="false" />
        <bs:bsui-table-header-cell columnId="total" label="Total" sortable="false" />
      </bs:bsui-table-header>
      <bs:bsui-table-body>
        <bs:bsui-table-row>
          <bs:bsui-table-cell>INV-1041</bs:bsui-table-cell>
            <bs:bsui-table-cell>49.00</bs:bsui-table-cell>
            </bs:bsui-table-row>
            <bs:bsui-table-row>
              <bs:bsui-table-cell>INV-1038</bs:bsui-table-cell>
                <bs:bsui-table-cell>49.00</bs:bsui-table-cell>
                </bs:bsui-table-row>
                <bs:bsui-table-row>
                  <bs:bsui-table-cell>INV-1029</bs:bsui-table-cell>
                    <bs:bsui-table-cell>129.00</bs:bsui-table-cell>
                    </bs:bsui-table-row>
                  </bs:bsui-table-body>
                </bs:bsui-table>
              </bs:bsui-drawer-popup>
            </bs:bsui-drawer>

Not dismissable

With dismissable off, Escape and backdrop clicks are ignored so a running import cannot be abandoned by accident.

HTML

<bs:bsui-drawer position="right" dismissable="false">
  <bs:bsui-drawer-trigger trigger_label="Import members" />
  <bs:bsui-drawer-backdrop />
  <bs:bsui-drawer-popup>
    <bs:bsui-text content="Importing 240 members" variant="title" tag="h3" />
    <bs:bsui-progress value="38" max="100" label="Matching email addresses" />
    <bs:bsui-text content="Leaving now would leave half the team without an invite." variant="muted" />
    <bs:bsui-drawer-footer>
      <bs:bsui-drawer-close label="Run in background" variant="default" />
    </bs:bsui-drawer-footer>
  </bs:bsui-drawer-popup>
</bs:bsui-drawer>

Anatomy

Drawer is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/drawer
bsui/drawer-backdrop
bsui/drawer-popup
bsui/drawer-close
bsui/drawer-footer
bsui/drawer-trigger

Attributes

Attribute	Type	Default
`position`	`left` `right` `top` `bottom`	`left`
`dismissable`	`toggle`	`true`

`bsui/drawer-backdrop`

This block takes no attributes.

`bsui/drawer-popup`

Attribute	Type	Default
`flush`	`toggle`	`false`

`bsui/drawer-close`

Attribute	Type	Default
`label`	`richtext`	—
`variant`	`default` `secondary` `outline` `ghost` `destructive`	`outline`
`x`	`toggle`	`false`

`bsui/drawer-footer`

This block takes no attributes.

`bsui/drawer-trigger`

Attribute	Type	Default
`trigger`	`text`	—
`trigger_block`	`text`	`bsui/button`
`trigger_label`	`richtext`	—
`trigger_icon`	`icon`	—
`trigger_iconPosition`	`left` `right`	`left`
`trigger_href`	`text`	—
`trigger_variant`	`default` `secondary` `outline` `ghost` `link` `destructive`	`default`
`trigger_size`	`default` `sm` `lg` `icon` `icon-sm`	`default`
`trigger_disabled`	`toggle`	`false`

Invoice	Total
INV-1041	49.00
INV-1038	49.00
INV-1029	129.00