Compact Button

A small square button for a single icon, such as close, more, copy or expand. Sizes run from 24 to 32px.

DesignReactVuePrompts

Copy

1

2

3

4

5

6

7

8

9

10

11

12

13

import { FlatButton, SkeuomorphicButton } from '@orvain/react';
 
// Button, icon only
<FlatButton iconOnly label="Open menu" />
 
// Fancy Button, icon only
<SkeuomorphicButton onlyIcon label="Open menu" />
 
// Custom icon
<FlatButton iconOnly label="Add item" swapSoloIcon={<PlusIcon />} />
<SkeuomorphicButton onlyIcon label="Add item">
  <PlusIcon />
</SkeuomorphicButton>

Add a row of 4 ghost Orvain Compact Buttons with square corners: close, more, copy and expand.

Orvain MCPIncluded with the library

When to use#

• For dismiss and overflow controls on cards, toasts and modals.
• For inline utilities: copy, collapse, drag handle.

Anatomy#

States#

Source#

The Compact Button is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published