metadata-based-explorer1
Version:
Box UI Elements
40 lines (31 loc) • 753 B
Markdown
The `Ghost` component can be used to create loading states and placeholder elements. The default shape is a 100% width rectangle.
A circle:
```
<Ghost borderRadius="50%" width={32} height={32} />
```
A rectangle:
```
<Ghost width={100} height={32} />
```
A pill:
```
<Ghost borderRadius={12} width={100} height={24} />
```
A more complicated layout:
```
<Media style={{maxWidth: 400}}>
<Media.Figure>
<Ghost borderRadius={"50%"} height={32} width={32} />
</Media.Figure>
<Media.Body>
<p>
<Ghost />
<Ghost />
<Ghost width={"50%"} />
</p>
<p>
<Ghost width={100} height={32} /> <Ghost width={100} height={32} />
</p>
</Media.Body>
</Media>
```