ActionCard

An ActionCard is a molecule meant for use inside the new Dashboard experience. This component is made up of multiple Coral atoms and allows a user to navigate to a new page with more visual context than a regular Button.

Basic usage


import { ActionCard } from '@krakentech/coral-molecules';
 
<ActionCard>
    <Typography textStyle="h5" component="span">
        Title
    </Typography>
    <Typography component="span">Subtitle</Typography>
</ActionCard>

Properties

actionIcon

The actionIcon prop supports ReactNode, which should be an icon or an illustration from @krakentech/icons or @krakentech/coral-media, respectively. It replaces the default right chevron if passed.


<ActionCard actionIcon={<IconArrowRight size={36} color="green" />}>
    <Typography textStyle="h5" component="span">
        View my latest bill
    </Typography>
    <Typography component="span">£24.50 for 11 Apr to 12 May</Typography>
</ActionCard>

hideActionIcon


<ActionCard hideActionIcon>
    <Typography textStyle="h5">Title</Typography>
    <Typography>Subtitle</Typography>
</ActionCard>

href


<ActionCard href="https://octopus.energy">
    <Typography textStyle="h5" component="span">
        Title
    </Typography>
    <Typography component="span">Subtitle</Typography>
</ActionCard>

Title

Subtitle

icon

The icon prop supports ReactNode, which should be an icon or an illustration from @krakentech/icons or @krakentech/coral-media, respectively.


<ActionCard icon={<IconBill size={36} />}>
    <Typography textStyle="h5" component="span">
        View my latest bill
    </Typography>
    <Typography component="span">£24.50 for 11 Apr to 12 May</Typography>
</ActionCard>

theme


<ActionCard theme="base900">
    <Typography textStyle="h5" component="span">
        Dark
    </Typography>
</ActionCard>
 
<ActionCard theme="base100">
    <Typography textStyle="h5" component="span" color="contentsBase100">
        Light
    </Typography>
</ActionCard>
 
<ActionCard theme="base500">
    <Typography textStyle="h5" component="span">
        Mid
    </Typography>
</ActionCard>
 
<ActionCard theme="secondary900">
    <Typography textStyle="h5" component="span">
        Mid light
    </Typography>
</ActionCard>
 
<ActionCard theme="tertiary100">
    <Typography
        textStyle="h5"
        component="span"
        color="contentsTertiary100"
    >
        Tertiary light
    </Typography>
</ActionCard>

Event Handling


<ActionCard onClick={() => {}}>...</ActionCard>

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`icon`	`React.ReactNode` What Coral icon would you like to display. This should be set to a React node via `@krakentech/icons` or `@krakentech/coral-media`.
`actionIcon`	`React.ReactNode` Provide a different icon in place of the default IconChevronRight.
`hideActionIcon`	`boolean` If `true`, the action icon will not be displayed.
`href`	`string` An internal link to a destination.
`target`	`"_self" \| "_blank" \| "_parent" \| "_top"` The target for the link.
`onClick`	`() => void` Callback function that is called when the ActionCard is clicked.
`theme`	`ResponsiveVariant<"base900" \| "base100" \| "base500" \| "secondary900" \| "tertiary100"> \| undefined` The theme for the internal Card that is used to construct this ActionCard. This is given directly to the Card component under the hood.	`base900`
`to`	`string \| undefined` The URL to navigate to when the button is clicked, if it is an anchor element, used with React Router.
`children`	`ReactNode`