@blueprintjs/core

Buttons

Blueprint provides a variety of button components with different intents, sizes, and states. This example demonstrates a primary button with the text 'Click Me'.

import { Button } from '@blueprintjs/core';

function App() {
  return <Button intent="primary" text="Click Me" />;
}

Dialogs

Blueprint's Dialog component is used to create modal dialogs. This example shows how to open and close a dialog with a button click.

import { Dialog, Button } from '@blueprintjs/core';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setIsOpen(true)} text="Open Dialog" />
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Dialog Title">
        <div className="bp3-dialog-body">
          This is the dialog content.
        </div>
        <div className="bp3-dialog-footer">
          <Button onClick={() => setIsOpen(false)} text="Close" />
        </div>
      </Dialog>
    </div>
  );
}

Forms

Blueprint provides form components like FormGroup and InputGroup to create well-structured forms. This example demonstrates a simple login form with username and password fields.

import { FormGroup, InputGroup, Button } from '@blueprintjs/core';

function App() {
  return (
    <form>
      <FormGroup label="Username" labelFor="username-input">
        <InputGroup id="username-input" placeholder="Enter your username" />
      </FormGroup>
      <FormGroup label="Password" labelFor="password-input">
        <InputGroup id="password-input" placeholder="Enter your password" type="password" />
      </FormGroup>
      <Button intent="primary" text="Submit" type="submit" />
    </form>
  );
}

Tables

Blueprint's Table component is used to create data tables. This example shows a table with two columns and five rows, where each cell displays its row index.

import { Table, Column, Cell } from '@blueprintjs/table';

function App() {
  const cellRenderer = (rowIndex) => <Cell>{`Row ${rowIndex}`}</Cell>;
  return (
    <Table numRows={5}>
      <Column name="Column 1" cellRenderer={cellRenderer} />
      <Column name="Column 2" cellRenderer={cellRenderer} />
    </Table>
  );
}