Blueprint.js Dialog Example - Blueprint-js Typing CST Test

Blueprint.js Dialog Example — Blueprint-js Code

Shows opening and closing a modal dialog using Blueprint.js Dialog component.

import React, { useState } from 'react';
import { Button, Dialog, Classes } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const DialogExample = () => {
	const [isOpen, setIsOpen] = useState(false);
	return (
		<div style={{ textAlign: 'center', marginTop: '50px' }}>
		<Button intent='primary' onClick={() => setIsOpen(true)}>Open Dialog</Button>
		<Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title='Blueprint.js Dialog'>
		<div className={Classes.DIALOG_BODY}>This is a dialog example.</div>
		<div className={Classes.DIALOG_FOOTER}>
		<Button onClick={() => setIsOpen(false)}>Close</Button>
		</div>
		</Dialog>
		</div>
	);
};

export default DialogExample;

Blueprint-js Language Guide

BlueprintJS is a React-based UI toolkit for building complex, data-dense, desktop-focused web applications. It emphasizes performance, usability, and a consistent design language for enterprise applications.

More Blueprint-js Typing Exercises

Practice Other Languages