Action Buttons

The Card provides options for rendering custom action buttons and customizing their orientation and layout.

Basic usage

To specify action buttons in the Card, you can use the CardActions component. You can arrange the content of the buttons either horizontally or vertically, by using the orientation option of the component. To specify their layout utilize the layout property.

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardHeader, CardTitle, CardBody, CardActions, CardImage, CardSubtitle } from '@progress/kendo-react-layout';

class App extends React.Component {
    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                <div style={{ width: '45%' }} className='k-card-list'>
                    <div>Actions Orientation</div>
                    <hr />
                    <Card style={{ width: 200 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 200 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions orientation='vertical'>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                </div>
                <div style={{ width: '45%' }} className='k-card-list'>
                    <div>Actions Layout</div>
                    <hr />
                    <Card style={{ width: 300 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 300 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions layout='center'>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 300 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions layout='end'>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                    <Card style={{ width: 300 }}>
                        <CardBody>
                            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
                        </CardBody>
                        <CardActions layout='stretched'>
                            <span className="k-button k-flat k-primary">Action 1</span>
                            <span className="k-button k-flat k-primary">Action 2</span>
                        </CardActions>
                    </Card>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /