Skip to main content

Actionable

Actionable is a component that adds touch interaction capabilities to its children. It's useful for making any element clickable/tappable.

Usage​

<Actionable 
  action={async () => console.log('pressed')}
  p="md"
>
  <Text>Tap me!</Text>
</Actionable>

With Layout Props​

<Actionable 
  action={async () => alert('Hello!')}
  width="100%"
  borderRadius="md"
  p="lg"
>
  <Flex direction="row" alignItems="center">
    <Icon icon="bell" />
    <Text>Notification Settings</Text>
  </Flex>
</Actionable>

Props​

Actionable accepts styled-system props from the following categories:

  • Space Props
    • margin, padding and their variants
  • Border Props
    • border, borderRadius, etc.
  • Layout Props
    • width, height, display, etc.

Specific Props​

action​

Type: Action

Async function to execute when the component is pressed. This is the primary interaction handler for the component.