@gluonjs/molecules / packages/molecules/src / ResponsiveActionBarProps

Interface: ResponsiveActionBarProps

Properties

attributes?

readonly optional attributes?: ResponsiveActionBarAttributes

compactControl?

readonly optional compactControl?: TemplateValue

presentation?

readonly optional presentation?: ResponsiveActionBarPresentation

primaryAction

readonly primaryAction: TemplateValue

state?

readonly optional state?: ResponsiveActionBarState

status?

readonly optional status?: TemplateValue

summary

readonly summary: TemplateValue

Example

Pass application-owned summary, status, action, and responsive state through the public props contract:

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);