Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

PressableCard

The `PressableCard` component can be used to create a card that responds to user interactions. It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop. If no `as` prop is provided, it defaults to a button.

FigmaGitHub

Examples

<PressableCard onClick={() => console.log} padding={4}>
  A simple pressable card
</PressableCard>

Different variants of PressableCard

<Flex gap={2} flexWrap="wrap">
  <PressableCard variant="floating" onClick={() => console.log} padding={4}>
    Floating
  </PressableCard>
    <PressableCard variant="core" onClick={() => console.log} padding={4}>
    Core
  </PressableCard>
  <PressableCard variant="accent" onClick={() => console.log} padding={4}>
    Accent
  </PressableCard>
</Flex>

Guidelines

Overview

The PressableCard is an interactive UI component designed for engaging user interactions. This component visually resembles a card but includes functionality for handling user presses or clicks, making it suitable for actions like navigation, launching modal windows, or triggering specific functions in an application.

Features

  • Responsive Feedback: Provides visual and tactile feedback when interacted with, indicating to the user that their input has been recognized.
  • Customizable Appearance: Supports various styling options to match the aesthetic needs of different applications.
  • Accessibility Features: Includes built-in accessibility features to ensure that the component is usable by people with disabilities.

Code

<PressableCard />

import { PressableCard } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
variantstring"floating" | "accent" | "core" - defaults to core
onClickfunction
asstring"button" | "a" | "label" - defaults to button