StellarUI

<stellar-fab>

Properties

Component

Example

Preview

Markup

Copy

<stellar-fab>
  <stellar-button tone="neutral" size="lg" shape="circle">A</stellar-button>
  <stellar-button tone="secondary" size="lg" shape="circle">B</stellar-button>
  <stellar-button tone="tertiary" size="lg" shape="circle">C</stellar-button>
</stellar-fab>

API

Complete props, events, slots, and implementation notes for the shipped floating action button.

Props

Prop	Type	Default	Notes
`layout`	`vertical \| flower`	`vertical`	Ports the shipped default stack and `fab-flower` quarter-circle modifier into one explicit prop.
`icon`	`string`	`mdi:plus`	Icon name passed to the fallback trigger button when the `trigger` slot is not provided.

Events

Event	Source	Notes
`focus` / `blur`	slotted trigger and actions	The open/close behavior is CSS-driven from focus state, so the slotted controls keep their normal native focus semantics.
`click`	slotted trigger and actions	Buttons and links inside the FAB keep their native click behavior. The component does not intercept activation.
custom events	none	`stellar-fab` does not emit custom events.

Slots

Slot	Notes
`trigger`	The always-visible anchor control. Use it when you want custom text, mixed icon-plus-label content, or a different button treatment. If omitted, the component renders a fallback circular `stellar-button` using the `icon` prop.
`close`	Optional replacement control shown over the trigger while the FAB is open.
`main-action`	Optional alternate primary action shown over the trigger while the FAB is open. Use this or `close`, not both.
default	The speed-dial items. Direct children can be plain wrappers with text plus buttons, links, or shipped `stellar-button` controls.

Notes

The public tag is `stellar-fab`, and it ships as a layout container for a trigger plus slotted action items instead of another button variant.
The API stays small: `layout` ports the `fab-flower`-style modifier, and `icon` only exists for the fallback trigger button.
The component defaults to fixed bottom-end positioning by default. Override the host with normal `style` or classes when you want an inline demo or another corner.
Open and close behavior stays CSS-driven from focus within, so native buttons and links inside the FAB keep their normal semantics.
The trigger label is authored content now, not a prop. Use the `trigger` slot whenever you want visible text or custom trigger markup.
Named `close` and `main-action` slots map the internal part classes without reintroducing the old class API on the public surface.
`stellar-fab` uses `mode: 'open'` and reads exported `stellar.css` variables directly, while leaving the visual treatment of each action to the slotted controls.
The visual baseline follows the shipped fixed corner placement, hidden-until-open action stack, optional trigger replacement, and quarter-circle flower layout.