Tile

One thing to start with, drawn as a card that is a button. A start screen and the empty places of an app use it, so a place to begin looks the same wherever it is offered.

tsx

import { Tile } from '@basmilius/react-ui';

tsx

import { FolderOpen, Plus, Terminal } from 'lucide-react';
import { Icon, Tile, shortcut } from '@basmilius/react-ui';

const NEW = shortcut('Mod+N');
const OPEN = shortcut('Mod+O');

export default function TileDemo() {
    return (
        <div className="grid w-full max-w-xl grid-cols-2 gap-2">
            <Tile primary icon={<Icon icon={Plus} />} title="New project" description="Start from an empty folder" shortcut={NEW} />
            <Tile icon={<Icon icon={FolderOpen} />} title="Open a folder" description="Anything on this computer" shortcut={OPEN} />
            <Tile icon={<Icon icon={Terminal} />} title="Open a terminal" size="sm" />
            <Tile icon={<Icon icon={Terminal} />} title="Waiting for a connection" description="Try again once it is back" disabled size="sm" />
        </div>
    );
}

Give one tile on a screen primary, and its border and its icon take the accent. sm is for a narrow column like a sidebar. The description is one short line, such as where the action lands or why it waits, and it truncates rather than wraps.

Props

Tile takes every prop of a <button> except title, plus:

Prop	Type	Default
`icon`	`ReactNode`		Required. A 16 pixel `Icon`.
`title`	`string`		Required.
`description`	`ReactNode`		One line under the title.
`shortcut`	`Shortcut`		Printed at the end of the tile.
`primary`	`boolean`	`false`
`size`	`'md' \| 'sm'`	`'md'`

TileProps is an exported type.

Tile ​

Props ​

Tile

Props