Usage

Import

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

Example

<Row>
  <Tag name="Default" />
  <Tag style="success" name="Success" />
  <Tag style="info" name="Info" />
  <Tag style="warning" name="Warning" />
  <Tag style="error" name="Error" />

</Row>
<Row>
  <Tag name="Default" />
  <Tag style="success" name="Success" />
  <Tag style="info" name="Info" />
  <Tag style="warning" name="Warning" />
  <Tag style="error" name="Error" />

</Row>
content_copy
Copy
live example

Icon

Place an icon on the left side of the tag.

<Row>
  <Tag style="info" name="info" icon="info" />
  <Tag style="success" name="success" icon="check" />
</Row>
<Row>
  <Tag style="info" name="info" icon="info" />
  <Tag style="success" name="success" icon="check" />
</Row>
content_copy
Copy
live example

Remove

A remove icon will be added when onRemove event handler provided

<Box>
  <Tag name="default" onRemove={(name) => console.log('onRemove - ', name)} />
</Box>
<Box>
  <Tag name="default" onRemove={(name) => console.log('onRemove - ', name)} />
</Box>
content_copy
Copy
live example

Loading

Optional loading state

<Row>
  <Tag loading name="default" onRemove={(name) => console.log('onRemove - ', name)} />
  <Tag loading name="Checking"  style="info"/>
</Row>
<Row>
  <Tag loading name="default" onRemove={(name) => console.log('onRemove - ', name)} />
  <Tag loading name="Checking"  style="info"/>
</Row>
content_copy
Copy
live example