GLUON / DOCS Playground

@gluonjs/molecules

@gluonjs/molecules / packages/molecules/src / ResponsiveActionBar

Variable: ResponsiveActionBar

const ResponsiveActionBar: Component<ResponsiveActionBarProps>

Example

Compose one caller-owned primary action with stable status semantics and safe-area-aware responsive layout:

ts
import { Button } from '@gluonjs/atoms';
import { ResponsiveActionBar, type ResponsiveActionBarAttributes, type ResponsiveActionBarPresentation, type ResponsiveActionBarProps, type ResponsiveActionBarState, responsiveActionBarStyles } from '@gluonjs/molecules';
const state: ResponsiveActionBarState = 'ready';
const presentation: ResponsiveActionBarPresentation = 'sticky';
const attributes: ResponsiveActionBarAttributes = { 'aria-label': 'Order actions' };
const props: ResponsiveActionBarProps = { summary: 'Review order', status: 'All fields are valid.', state, presentation, attributes, primaryAction: Button({ label: 'Continue' }) };
const action = ResponsiveActionBar(props);
console.log(action, responsiveActionBarStyles);