Skip to main contentSkip to site searchSkip to component search
Honeycomb

panel-footer-column

Props

Prop nameTypeDefaultDescription
extraClassesstring | undefined

Injection in className

narrowboolean | undefined

Makes the column width to be content-aware

childrenReactNodeRequired

Content of the column

A wrapper for the panel footer columns. Use it inside the PanelFooter component.

Panel Footer column Layouts

The PanelFooterColumn accepts a narrow prop to make the columns content aware.

By default they will fill the available space and be evenly distributed, but you can change it.

The following examples are an attempt to cover a large variety of options, with multiple columns and single columns, using text, buttons and button groups.

But be aware of screen width constraints!

Notice that the PanelFooter accepts up to two PanelFooterColumn components, and the PanelFooterColumn allows any type of content. On smaller screens the side variations don't offer enough space for much, so use either the bottom positioned panel or the fullSize panel variation to get more horizontal space if needed.

Notice: The style props in all of the examples bellow are there for documentation purposes only, they should

not be copied to production code as they will break the Panel styles.

import { Button, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn } from '@flixbus/honeycomb-react';

<Panel id="panel-center" active position="left" style={{ position: 'relative', height: '250px', zIndex: '0' }}>
  <PanelHeader>Panel Example</PanelHeader>
  <PanelContent>
    A panel with a single wide button.
  </PanelContent>
  <PanelFooter>
    <PanelFooterColumn>
      <Button appearance="primary" display="block">Confirm</Button>
    </PanelFooterColumn>
  </PanelFooter>
</Panel>

import { Text, Button, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn } from '@flixbus/honeycomb-react';

<Panel id="panel-center" active position="left" style={{ position: 'relative', height: '250px', zIndex: '0' }}>
  <PanelHeader>Panel Example</PanelHeader>
  <PanelContent>
    A panel with text and buttons side by side.
  </PanelContent>
  <PanelFooter>
    <PanelFooterColumn narrow>
      <Text>Reserved seats: 0 of 1</Text>
    </PanelFooterColumn>
    <PanelFooterColumn narrow>
      <Button appearance="primary">Confirm</Button>
    </PanelFooterColumn>
  </PanelFooter>
</Panel>

Using ButtonGroup

Using ButtonGroup props you can create even more varieties.

import { Button, ButtonGroup, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn } from '@flixbus/honeycomb-react';

const BP_SM = 600;
const [blockButtons, setBlockButtons] = React.useState(window.innerWidth <= BP_SM);

React.useEffect(() => {
  function handleResize() {
    console.log('bananas');
    setBlockButtons(window.innerWidth <= BP_SM);
  }

  window.addEventListener('resize', handleResize)
}, []);

const buttonDisplay = blockButtons ? { display: 'block' } : {};

<Panel id="panel-center" active position="bottom" style={{ position: 'relative', height: '250px', zIndex: '0' }}>
  <PanelHeader>Panel Example</PanelHeader>
  <PanelContent>
    A panel with responsive buttons using ButtonGroup
  </PanelContent>
  <PanelFooter justify="end">
    <PanelFooterColumn>
      <ButtonGroup alignment="end">
        <Button {...buttonDisplay}>Cancel</Button>
        <Button appearance="primary" {...buttonDisplay}>Confirm</Button>
      </ButtonGroup>
    </PanelFooterColumn>
  </PanelFooter>
</Panel>

import { Button, ButtonGroup, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn } from '@flixbus/honeycomb-react';

<Panel id="panel-center" active position="bottom" style={{ position: 'relative', height: '250px', zIndex: '0' }}>
  <PanelHeader>Panel Example</PanelHeader>
  <PanelContent>
    Maybe two wide buttons?
  </PanelContent>
  <PanelFooter>
    <PanelFooterColumn>
      <ButtonGroup>
        <Button display="block">Cancel</Button>
        <Button appearance="primary" display="block">Confirm</Button>
      </ButtonGroup>
    </PanelFooterColumn>
  </PanelFooter>
</Panel>

import { Text, Button, ButtonGroup, Panel, PanelHeader, PanelContent, PanelFooter, PanelFooterColumn } from '@flixbus/honeycomb-react';
import { Icon, IconDelete } from '@flixbus/honeycomb-icons-react';

<Panel id="panel-center" active position="bottom" style={{ position: 'relative', height: '250px', zIndex: '0' }}>
  <PanelHeader>Panel Example</PanelHeader>
  <PanelContent>
    Another fancy example using ButtonGroup and narrow columns
  </PanelContent>
  <PanelFooter>
    <PanelFooterColumn>
      <Text extraClasses="hcr-has-text-right">
        Are you sure?
      </Text>
    </PanelFooterColumn>
    <PanelFooterColumn narrow>
      <ButtonGroup orientation="horizontal" alignment="end" gap="half">
        <Button appearance="secondary">Update</Button>
        <Button appearance="danger" display="square" aria-label="Delete">
          <Icon InlineIcon={IconDelete} aria-hidden="true" />
        </Button>
      </ButtonGroup>
    </PanelFooterColumn>
  </PanelFooter>
</Panel>