FloatButton
A themed floating action button with built-in or custom SVG/image icons, an optional label and badge.
Live TypeScript example
Try the component here, then use the source below in your application.
- JavaScript
- 2.9 KiB
- Component CSS
- 1.1 KiB
- Shared theme CSS
- 3.8 KiBonce per application
How sizes are measured
The JavaScript figure includes this component’s required helpers. CSS includes its styling dependencies. Each entry is bundled separately for ES2022, minified, then compressed with gzip level 9. Your bundler may share helpers across components. Images, fonts, examples and application code are excluded.
Before compression: JavaScript 6.3 KiB; component CSS 2.9 KiB. These figures describe browser assets, not the complete package download.
View all component measurements →Activate the floating action and change its options. Your application handles Click.
import '@blukavantui/web/theme.css'
import {createFloatButton} from '@blukavantui/web/float-button';
import '@blukavantui/web/float-button.css';
export function mount(host:HTMLElement) {
const stage=document.createElement('div');stage.style.cssText='position:relative;min-height:240px;width:100%';
const status=document.createElement('p');status.setAttribute('role','status');status.textContent='Activate the floating action.';
host.append(stage,status);
let count=0;
const action=createFloatButton(stage,{Label:'Need help?',Icon:'Help',IconUrl:new URL('../assets/assistant-mark.svg',import.meta.url).href,ShowLabel:true,Shape:'Square',BadgeCount:3,Position:'Container',Animate:true}, {
Click:()=>{status.textContent='Help requested '+(++count)+' time(s). Your app handles this action.';},
});
return {destroy(){action.destroy();stage.remove();status.remove();}};
}
const instance = mount(document.getElementById('example')!)
// When this page or framework component is removed:
// instance.destroy()
Install the library and add the host element
npm install https://blukavantui.blutekmedia.com/downloads/blukavantui-web-0.6.2.tgz<div id="example"></div>This example uses the downloadable @blukavantui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.
createFloatButton
Set IconUrl to a public SVG/image path or a bundler-resolved asset URL. Clear it to restore the built-in Icon. Label remains the accessible name. Images retain their original colors, so choose artwork that contrasts with the button. Raw SVG markup and data URLs are not accepted.
import { createFloatButton } from '@blukavantui/web/float-button';
import '@blukavantui/web/float-button.css';Load @blukavantui/web/theme.css once in your app shell.createFloatButton(host: HTMLElement, options?: FloatButtonOptions, events?: FloatButtonEvents)Reference for @blukavantui/web 0.6.2. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.
Options
13| Name | Type / requirement | Usage |
|---|---|---|
Label | stringOptional | Accessible button name and tooltip, including when a custom icon is used. |
Icon | 'Chat' | 'Help' | 'Plus' | 'Up' | 'Feedback'Optional | Built-in glyph used when IconUrl is empty, loading or unavailable. |
IconUrl | stringOptional | SVG or image asset URL (relative or HTTP(S)). Overrides Icon; empty or failed URLs fall back to Icon. |
Color | ComponentColorOptional | A shared ComponentColor name. Colors adapt to the active appearance. |
Shape | 'Circle' | 'Square'Optional | |
ShowLabel | booleanOptional | |
BadgeCount | numberOptional | |
Position | 'Viewport' | 'Container'Optional | |
Placement | 'BottomRight' | 'BottomLeft' | 'TopRight' | 'TopLeft'Optional | |
Offset | numberOptional | |
IsDisabled | booleanOptional | Disables interaction with this component. |
Animate | booleanOptional | |
ExtendedClass | stringOptional | Additional CSS class names on the component root. |
Callbacks
2| Name | Type / requirement | Usage |
|---|---|---|
Click | () => unknownOptional | Called when the enabled control is activated. |
Error | (message: string) => unknownOptional | Reports invalid or failed custom image URLs and consumer callback errors. |
Instance methods & properties
3| Name | Signature / type | Usage |
|---|---|---|
element | HTMLElement | Root owned by this instance. Dispose before removing its host. |
update | (patch: Partial<FloatButtonOptions>) => void | Apply a partial options update to this instance. |
destroy | () => void | Dispose the instance and its listeners when the view is removed. |
Related data types
Expand a type for its fields and allowed values.
ComponentColor
type ComponentColor = typeof componentColors[number];Use these inputs, events, actions and structures in Service Studio. Names and data bindings are specific to the native Blocks.
Included in the planned free BluKavantUI Community edition. The official OutSystems Forge release is coming soon. View Community scope →
Open OutSystems showcase ↗- Web runtime
- Partially supported
- TypeScript
- Partially supported
- OutSystems
- Partially supported
Statuses describe the component’s rendered code and interactions. Supply accessible content and follow the component guidance when integrating it.
Accessibility guidance →Purpose and use
A themed floating action button with built-in or custom SVG/image icons, an optional label and badge.
Keyboard design guidance
Tab focuses the button; Enter or Space activates it. The accessible name includes its badge count. Reduced motion disables entry and hover animation.
See the support status above for review coverage and any limitations.
In your application
Provide useful labels, preserve visible focus, and test the component with your actual content. Use text alongside status colors and check contrast in each state.
Events0No events yet.
Interact with an example to see its events.