Icon-only <IconButton>

[zhusee2]

Purpose

Provide an icon-only <Button> which displays status icon on the icon.

Implement

1. Fix <Button>:

• should be exposed to bundle via index.js
• should turn red on error state

2. Add <IconLayout> for placing status icon above an <Icon>
3. Add <IconButton> as a custom-configured variant of <Button>

Notes

<Tooltip> will be implemented in next PR.

Virtual Structure

<IconButton icon="printer" status="loading">
    <Button status="loading">
        <IconLayout icon="printer">
            <Icon type="printer" />
            <StatusIcon status="loading" />
        </IconLayout>
    </Button>
</IconButton>

Demo

[cjies]

Good to go 👍

[paizanmay]

COOL~~