FAB
A floating action button: a raised button that pins to a corner of the screen and carries the one main action of that screen. Icon only or extended with a label, five pinned placements written in logical properties, and safe-area padding.
One per screen
Fixed="false" or Placement="FabPlacement.Inline" so the buttons stay inside their preview instead of pinning to the viewport.
Default
Fixed="false" pins the button to the nearest positioned ancestor rather than the viewport, which is what a card or a panel needs.
An icon-only button has no text of its own, so AriaLabel is required or it is announced with no name.
Variants and Sizes
BbButton variant. Three sizes: Small is 40px, Default 56px and Large 64px when icon-only.
Shape chooses between the theme's corner radius and a full circle.
Extended
ChildContent switches the button from a fixed square to a fixed height with horizontal padding, so the label sets the width. An extended button takes its accessible name from the label, so AriaLabel is not needed.Placement
Inline. The corner classes use logical properties, so BottomEnd is the bottom
right in a left-to-right layout and the bottom left in a right-to-left one — turn on RTL with the
toggle in the header to see it move. Every pinned value takes the button out of the document flow, so it reserves no space.
Speed Dial
BbFab renders a BbButton, so it works as an AsChild trigger. That is how a speed dial is composed: the button opens a menu of actions rather than running one.Behaviour
Stacking. The button sits at z-index: 40 — above a bottom navigation bar and below the overlay layer,
so a dialog, sheet or popover covers it.
Safe area. SafeArea adds env(safe-area-inset-bottom) as a bottom margin for the bottom
placements and env(safe-area-inset-top) for the top ones, so a home indicator or a notch cannot cover the button.
It is ignored when Placement is Inline.
Offset from the edge. The pinned placements use a 24px offset. Class is merged last and therefore wins,
which is the way to change it.
Reduced motion. The shadow transition is disabled under prefers-reduced-motion.