Color Presets

The ColorPalette provides a set of predefined color palettes such as office, basic, and apex.

The following example demonstrates how to use the predefined color presets of the ColorPalette.

class App extends React.Component {
    render() {
        return (
            <div>
                <div className='row'>
                    <div className="col-md-3">
                        <h4>Office</h4>
                        <ColorPalette tileSize={16} palette="office" />
                    </div>
                    <div className="col-md-3">
                        <h4>Apex</h4>
                        <ColorPalette tileSize={16} palette="apex" />
                    </div>
                    <div className="col-md-3">
                        <h4>Austin</h4>
                        <ColorPalette tileSize={16} palette="austin" />
                    </div>
                    <div className="col-md-3">
                        <h4>Clarity</h4>
                        <ColorPalette tileSize={16} palette="clarity" />
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-3">
                        <h4>Slipstream</h4>
                        <ColorPalette tileSize={16} palette="slipstream" />
                    </div>
                    <div className="col-md-3">
                        <h4>Metro</h4>
                        <ColorPalette tileSize={16} palette="metro" />
                    </div>
                    <div className="col-md-3">
                        <h4>Flow</h4>
                        <ColorPalette tileSize={16} palette="flow" />
                    </div>
                    <div className="col-md-3">
                        <h4>Hardcover</h4>
                        <ColorPalette tileSize={16} palette="hardcover" />
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-3">
                        <h4>Trek</h4>
                        <ColorPalette tileSize={16} palette="trek" />
                    </div>
                    <div className="col-md-3">
                        <h4>Verve</h4>
                        <ColorPalette tileSize={16} palette="verve" />
                    </div>
                    <div className="col-md-3">
                        <h4>Basic</h4>
                        <ColorPalette tileSize={16} palette="basic" />
                    </div>
                    <div className="col-md-3">
                        <h4>Monochrome</h4>
                        <ColorPalette tileSize={16} palette="monochrome" />
                    </div>
                </div>
            </div>
        );
    }
}


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