Usage

Import

import { Tag } from '@passfort/castle'
content_copy
Copy

Example

<Row>
  <Tag>Default</Tag>
  <Tag style="success">Success</Tag>
  <Tag style="info">Info</Tag>
  <Tag style="warning">Warning</Tag>
  <Tag style="error">Error</Tag>
</Row>
<Row>
  <Tag>Default</Tag>
  <Tag style="success">Success</Tag>
  <Tag style="info">Info</Tag>
  <Tag style="warning">Warning</Tag>
  <Tag style="error">Error</Tag>
</Row>
content_copy
Copy
live example

Icon

Place an icon inside the tag

<Row>
  <Tag style="info">
    <Icon icon="info" />
    Info
  </Tag>
  <Tag style="success">
    <Tag.Label>Success</Tag.Label>
    <Icon icon="check" />
  </Tag>
</Row>
<Row>
  <Tag style="info">
    <Icon icon="info" />
    Info
  </Tag>
  <Tag style="success">
    <Tag.Label>Success</Tag.Label>
    <Icon icon="check" />
  </Tag>
</Row>
content_copy
Copy
live example

Remove

A remove icon will be added when onRemove event handler provided

<Box>
  <Tag onRemove={(name) => log('Remove:', name)}>Default</Tag>
</Box>
<Box>
  <Tag onRemove={(name) => log('Remove:', name)}>Default</Tag>
</Box>
content_copy
Copy
live example

Loading

Optional loading state

<Row>
  <Tag loading onRemove={(name) => log('Remove:', name)}>
    Loading
  </Tag>
  <Tag loading style="info">
    Checking
  </Tag>
</Row>
<Row>
  <Tag loading onRemove={(name) => log('Remove:', name)}>
    Loading
  </Tag>
  <Tag loading style="info">
    Checking
  </Tag>
</Row>
content_copy
Copy
live example