The CardActions component allows you to lay out actions inside your Card.
Examples #
Import Syntax #
import Card, { CardActions } from 'mineral-ui/Card';Note
Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.
Basic Usage #
Use CardActions to add actions, Buttons or Links, to your Card. Buttons will automatically size themselves appropriately, and can be any variety (primary, minimal, icon-only, etc.)
<DemoLayout> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button>Button 1</Button> <Button iconStart={<IconCloud />}>Button 2</Button> </CardActions> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button minimal >Button 1</Button> <Button iconStart={<IconCloud />} primary>Button 2</Button> </CardActions> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button iconStart={<IconCloud title="Button label 1" />} minimal /> <Button iconStart={<IconCloud title="Button label 2" />} minimal /> </CardActions> </Card> </DemoLayout>
With Links #
Place Links in CardActions when your Card needs to point the users to another location.
<DemoLayout> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Link href="https://example.com">Link 1</Link> <Link href="https://example.com">Link 2</Link> </CardActions> </Card> </DemoLayout>
Bidirectionality #
CardActions reverses its alignment when the direction theme
variable is set to rtl (right-to-left).
<DemoLayout dir="rtl"> <ThemeProvider theme={{ direction: 'rtl' }}> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button>زر واحد</Button> <Button iconStart={<IconCloud />}>زر اثنين</Button> </CardActions> </Card> </ThemeProvider> </DemoLayout>
API & Theme #
CardActions Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| CardActionsAction_spaceInline | theme.space_inline_sm |
Usage #
When/How to Use #
CardActions is best used when Cards have 2–3 associated actions, which may or may not be the same for each Card in the set.
Best Practices #
Place the primary action on the right (left for rtl languages).
Card Title
Don't use CardActions with a single, obvious action. Use
Card's onClick prop instead.
Card Title
Don't place too many actions in CardActions. If you must have more than 2–3 actions, use icon-only Buttons.