@invisionag/iris-react-status-card
v2.8.2
Published
```js import StatusCard from '@invisionag/iris-react-status-card'; import { StatusCardGroup } from '@invisionag/iris-react-status-card'; ``` ## General Props
Downloads
183
Maintainers
Keywords
Readme
import StatusCard from '@invisionag/iris-react-status-card';
import { StatusCardGroup } from '@invisionag/iris-react-status-card';
General Props
icon
Can receive either a string or a react component. When passed a string, it will render the matching iris icon in the header. When passed a component, it will directly render the component instead.
Usage
<StatusCard icon="check circle" />
<StatusCard icon={() => <div>Custom Component</div>} />
footer
Can receive JSX and will render a footer section into the card. Can be used for content that is supposed to be aligned to the bottom of the card
Usage
<StatusCard footer={StatusCardProps => <div>My Footer</div>} />
Statuses
Organizes some content in a card layout, with the card being able to communicate different statuses.
success:
The condition is achieved, this card is supposed to confirm a correct status.
Usage:
<StatusCard success heading="It worked!" />
error:
The cards condition is not achieved. The card is interactable.
Usage:
<StatusCard hasError heading="This did not work!" />
active:
This cards condition is undetermined. User action is expected here. If combined with success
or hasError
, the status takes priority when computing styling.
Usage:
<StatusCard active heading="Click me!" />
disabled:
Its not possible to interact with this card. Whether status is success
or error
does not matter.
Usage:
<StatusCard disabled heading="I am disabled!" />
largeIcon
Doubles the size of the Icon. Should be used with large StatusCards.
Usage:
<StatusCard heading="I have a large icon!" largeIcon />
Content
StatusCards are comprised of heading
, icon
and children
. heading
expects any string, icon
has to be a valid iris-react-icon value, and children
may be any react node(s).
Group
The component also export StatusCardGroup
, which is a flex-based wrapper for Cards. It also takes care of gutter-spacing for the cards it includes.
Usage:
<StatusCardGroup>
<StatusCard heading="I'm a card!" />
<StatusCard heading="I'm a card too!" />
</StatusCardGroup>