BinaryButton

A selectable Button tile that can display an icon and labels or custom tile content.

Cabinets title

Cabinets subtitle

Walls title

Walls subtitle

Roof title

Roof subtitle

Figma

React

Bootstrap

Native

React

BinaryButton composes RadioButton or CheckButton depending on the provided inputType with support for larger tile content with an icon, title and subtitle.

live

<BinaryButtonRadioGroup defaultValue="one" width="100%">
  <BinaryButton
    icon={iconCabinet}
    subtitle="Cabinets subtitle"
    title="Cabinets title"
    value="one"
  />
  <BinaryButton
    icon={iconWalls}
    subtitle="Walls subtitle"
    title="Walls title"
    value="two"
  />
  <BinaryButton
    icon={iconRoof}
    subtitle="Roof subtitle"
    title="Roof title"
    value="three"
  />
</BinaryButtonRadioGroup>

Input type

BinaryButton renders input elements and supports both radio and checkbox type inputs. The inputType prop on either the buttons or the group determine which input type is rendered.

The following components are also exported for convenience and clarity when working with different input types:

BinaryButtonRadioGroup
BinaryButtonRadio
BinaryButtonCheckboxGroup
BinaryButtonCheckbox

The size and inputType props are propagated from group to the child buttons.

Radio

live

<BinaryButtonRadioGroup defaultValue="one" gridTemplateColumns="repeat(3, 1fr)">
  <BinaryButton
    icon={iconCabinet}
    subtitle="Cabinets subtitle"
    title="Cabinets title"
    value="one"
  />
  <BinaryButton
    icon={iconWalls}
    subtitle="Walls subtitle"
    title="Walls title"
    value="two"
  />
  <BinaryButton
    icon={iconRoof}
    subtitle="Roof subtitle"
    title="Roof title"
    value="three"
  />
</BinaryButtonRadioGroup>

Checkbox

live

<BinaryButtonCheckboxGroup
  defaultValue={['one']}
  gridTemplateColumns="repeat(3, 1fr)"
>
  <BinaryButton
    icon={iconCabinet}
    subtitle="Cabinets subtitle"
    title="Cabinets title"
    value="one"
  />
  <BinaryButton
    icon={iconWalls}
    subtitle="Walls subtitle"
    title="Walls title"
    value="two"
  />
  <BinaryButton
    icon={iconRoof}
    subtitle="Roof subtitle"
    title="Roof title"
    value="three"
  />
</BinaryButtonCheckboxGroup>

Subtitle type

An alternative version of the subtitle is available by passing subtitleType.

live

<BinaryButtonRadioGroup defaultValue="one" gridTemplateColumns="repeat(3, 1fr)">
  <BinaryButton
    icon={iconCabinet}
    subtitle="Cabinets subtitle"
    subtitleType="badge"
    title="Cabinets title"
    value="one"
  />
  <BinaryButton
    icon={iconWalls}
    subtitle="Walls subtitle"
    subtitleType="badge"
    title="Walls title"
    value="two"
  />
  <BinaryButton
    icon={iconRoof}
    subtitle="Roof subtitle"
    subtitleType="badge"
    title="Roof title"
    value="three"
  />
</BinaryButtonRadioGroup>

Size

BinaryButton is available in small, medium and large sizes. The small size adjusts the layout of the tile slightly.

live

<BinaryButtonRadioGroup defaultValue="one" size="small" width="700">
  <BinaryButton
    icon={iconCabinet}
    subtitle="Cabinets subtitle"
    subtitleType="badge"
    title="Cabinets title"
    value="one"
  />
  <BinaryButton
    icon={iconWalls}
    subtitle="Walls subtitle"
    subtitleType="badge"
    title="Walls title"
    value="two"
  />
  <BinaryButton
    icon={iconRoof}
    subtitle="Roof subtitle"
    subtitleType="badge"
    title="Roof title"
    value="three"
  />
</BinaryButtonRadioGroup>

Color mode

BinaryButton supports dark mode inherited from the color mode context.

live

<Stack spacing="300">
  <HStack padding="500" background="neutral.0" borderRadius="300">
    <BinaryButtonCheckbox
      icon={iconWalls}
      subtitle="Walls subtitle"
      subtitleType="badge"
      title="Walls title"
      value="two"
    />
    <BinaryButtonCheckbox
      icon={iconWalls}
      subtitle="Walls subtitle"
      title="Walls title"
      value="two"
    />
  </HStack>
  <HStack padding="500" background="neutral.875" borderRadius="300">
    <ForceMode colorMode="dark">
      <BinaryButtonCheckbox
        icon={iconWalls}
        subtitle="Walls subtitle"
        subtitleType="badge"
        title="Walls title"
        value="two"
      />
      <BinaryButtonCheckbox
        icon={iconWalls}
        subtitle="Walls subtitle"
        title="Walls title"
        value="two"
      />
    </ForceMode>
  </HStack>
</Stack>

Custom content

To render custom tile content, simply pass children to the BinaryButton. Use buttonStyles to customize padding, etc. on the parent button and contentStyles to customize the layout of the custom content.

live

<BinaryButtonCheckbox
  buttonStyles={{ padding: '500', paddingY: '600' }}
  contentStyles={{ display: 'flex', flexDirection: 'column', gap: '300' }}
>
  <Heading size="small" noMargin>
    Custom Content
  </Heading>
  <Body as="div" whiteSpace="wrap">
    <LoremIpsum style={{ margin: 0 }} generate={{ p: 1 }} />
  </Body>
</BinaryButtonCheckbox>

Design System

Settings

BinaryButton

React

Input type

Radio

Checkbox

Subtitle type

Size

Color mode

Custom content