Skip to main contentSkip to site searchSkip to component search
Honeycomb

button

Props

Prop nameTypeDefaultDescription
appearance"primary" | "secondary" | "danger" | "link" | undefined

Button appearance.

display"block" | "square" | "stacked" | undefined

Force a given display mode.

Elem"button" | "a" | "span" | undefinedbutton

Define wrapping element.

RouterLinkHCRouterLink | undefined

Wraps the component inside a RouterLink. E.g. if you use ReactRouter or a similar library. If this prop is provided the Elem prop is ignored.

innerRef((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | ((instance: HTMLButtonElement | null) => void) | ... 4 more ... | undefined

Custom ref forwarded to the element.

loadingboolean | undefinedfalse

Set loading state.

size"sm" | "md" | "lg" | undefined

Size.

extraClassesstring | undefined

Injection in className.

The button component comes with a normal and four additional appearances available.

It supports Icons from the honeycomb-icons-react library as children. When an icon is found it will receive the button class names so styles are handled correctly.

You can also use the Elem prop to override the wrapping html element.

import { Button, ButtonGroup } from '@flixbus/honeycomb-react';
import { Icon, IconCheckSolid, IconAttention, IconDeleteSolid, IconArrowLeft } from '@flixbus/honeycomb-icons-react';

<ButtonGroup wrap>
  <Button>Normal</Button>
  <Button appearance="primary"><Icon InlineIcon={IconAttention} /> Primary</Button>
  <Button appearance="secondary"><Icon InlineIcon={IconCheckSolid} /> Secondary</Button>
  <Button appearance="danger"><Icon InlineIcon={IconDeleteSolid} /> Danger</Button>
  <Button appearance="link" Elem="a" href="#/Components/Button"><Icon InlineIcon={IconArrowLeft} /> I'm a link</Button>
</ButtonGroup>

It supports native and custom states:

import { Button, ButtonGroup } from '@flixbus/honeycomb-react';

<ButtonGroup>
  <Button appearance="primary" disabled>Out of order</Button>
  <Button loading>Spin spin</Button>
</ButtonGroup>

Please notice that disabling anchors (Elem="a") is not supported and that's intentional.

Although you can visually disable them by hacking the styles, effectively disabling links is considered a bad practice and thus should be avoided.

Read more on the following article: How to Disable Links | CSS-Tricks - CSS-Tricks

Display options

It also supports 3 additional display styles.

The square button can be used for very small buttons that have only an icon. When using buttons like this make sure to offer an accessible label for screen reader users:

import { Button, ButtonGroup } from '@flixbus/honeycomb-react';
import { Icon, IconSettingsSolid, IconDeleteSolid, IconDownload } from '@flixbus/honeycomb-icons-react';

<ButtonGroup orientation="horizontal">
  <Button display="square" aria-label="Open Settings">
    <Icon InlineIcon={IconSettingsSolid} aria-hidden="true" />
  </Button>
  <Button appearance="danger" display="square" aria-label="Delete entry">
    <Icon InlineIcon={IconDeleteSolid} aria-hidden="true" />
  </Button>
  <Button appearance="primary" display="square" aria-label="Download invoice">
    <Icon InlineIcon={IconDownload} aria-hidden="true" />
  </Button>
</ButtonGroup>

The block button fills the entire available space and can be used on narrow areas like the footer of a panel:

import { Button } from '@flixbus/honeycomb-react';
<Button appearance="secondary" display="block">Block Button</Button>

The stacked button will show the icon and text stacked in a column rather than in line.

One common place where stacked buttons can be use is in the header bar.

import { Button, ButtonGroup } from '@flixbus/honeycomb-react';
import { Icon, IconDownload, IconTime, IconQuestion } from '@flixbus/honeycomb-icons-react';

<ButtonGroup orientation="horizontal">
  <Button appearance="primary" display="stacked">
    <Icon InlineIcon={IconDownload} size={4} aria-hidden="true" />
    Download
  </Button>
  <Button appearance="secondary" display="stacked" loading>
    <Icon InlineIcon={IconTime} size={4} aria-hidden="true" />
    Loading...
  </Button>
  <Button appearance="link" display="stacked">
    <Icon InlineIcon={IconQuestion} size={4} aria-hidden="true" />
    Help
  </Button>
</ButtonGroup>

Handy buttons

These handy buttons will provide just a layer of abstraction on common buttons, such as "Close" and "Back" that will save you some lines of code.

They accept any button props as ...rest so you can fully customize them.

CloseButton
The square close button is probably the most common button out there. It only requires an accessible "aria-label" to be good to go.
BackButton
The back button can have text or not. It requires an "aria-label" if you don't want visible text.
ToggleButton
A toggle button will toggle the arrow icon based on any of the "pressed" states: `aria-pressed`, `aria-selected` or `aria-expanded`. It can also have visible text or not and will require an "aria-label" if you don't want visible text. 
import { CloseButton, BackButton, ToggleButton, ButtonGroup } from '@flixbus/honeycomb-react';

const [myCustomState, setMyCustomState] = React.useState(true);

const myToggleHandler = (event) => {
  setMyCustomState((e) => !e);
};

<>
  <ButtonGroup orientation="horizontal">
    <CloseButton onClick={(event) => console.log('Closed')} aria-label="Close" />
    <BackButton aria-label="Return" />
    <BackButton>
      Return
    </BackButton>
    <ToggleButton onClick={myToggleHandler} aria-label="Toggle" aria-pressed={myCustomState}>
      {myCustomState ? 'I am pressed' : 'I am not pressed' }
    </ToggleButton>
  </ButtonGroup>
</>