Interactable

@coinbase/cds-web@8.13.6

A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.

Import

import { Interactable } from '@coinbase/cds-web/system/Interactable'

SourceView source code

---

Related components

• Pressable,
• Button

Interactable components are simple elements that define background and border styles, both of which are used in determining state styles.

Hover and pressed states

These states are rather complex as they are not a simple color hexcode. Instead, we dynamically blend the background/foreground color with a chosen spectrum color, coupled with an opacity change, to determine the new state color.

On mobile, stacked Views are used to achieve this.

On web, combining background-image, background-color, and CSS variables are used to achieve this.

Loading...

󰙡

Live Code

<Interactable
  as="button"
  background="bgAlternate"
  borderColor="fgPositive"
  borderWidth="button"
  borderRadius={300}
>
  <Box as="span" padding={1}>
    <Text font="headline" as="span">
      Content goes here!
    </Text>
  </Box>
</Interactable>

Disabled states

On both platforms, interactable elements have their opacity greatly reduced when disabled.

Loading...

󰙡

Live Code

<Interactable
  disabled
  as="button"
  background="bgAlternate"
  borderColor="fgNegative"
  borderWidth="button"
  borderRadius={500}
>
  <Box as="span" padding={1}>
    <Text font="headline" as="span">
      Content goes here!
    </Text>
  </Box>
</Interactable>

Block Interactable

Interactables expand to 100% width when the block prop is passed.

Loading...

󰙡

Live Code

<Interactable
  block
  as="button"
  background="bgAlternate"
  borderColor="fgNegative"
  borderWidth="button"
  borderRadius={500}
>
  <Box as="span" padding={1}>
    <Text font="headline" as="span">
      Content goes here!
    </Text>
  </Box>
</Interactable>

A11y

Since this component is low-level, it doesn't require much accessibility out of the box. Instead, accessibility should be applied when composing with interactable. An example of this can be found in the Pressable component.