Chip
Chips are compact elements that represent an input, attribute, or action.
Usage
import { Chip } from 'stwui';
import Chip from 'stwui/chip';
No Type info success warn error <script lang="ts">
import { Chip } from 'stwui';
</script>
<Chip>
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">No Type</Chip.Label>
</Chip>
<Chip type="info">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">info</Chip.Label>
</Chip>
<Chip type="success">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">success</Chip.Label>
</Chip>
<Chip type="warn">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">warn</Chip.Label>
</Chip>
<Chip type="error">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">error</Chip.Label>
</Chip>
Castor Troy Castor Troy Castor Troy Castor Troy Castor Troy <script lang="ts">
import { Chip } from 'stwui';
</script>
<Chip size="xs">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="sm">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip>
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="lg">
<Chip.Avatar slot="avatar" src="no-image.png" />
<Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="xl">
<Chip.Avatar slot="avatar" src={avatar} />
<Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
Castor Troy Castor Troy <script lang="ts">
import { Chip } from 'stwui';
</script>
<Chip type="info">
<Chip.Avatar slot="avatar" src="image.png" />
<Chip.Label slot="label">Castor Troy</Chip.Label>
<Chip.Close slot="close" />
</Chip>
<Chip>
<Chip.Avatar slot="avatar" src="image.png" />
<Chip.Label slot="label">Castor Troy</Chip.Label>
<Chip.Close slot="close" />
</Chip>
Chip Props
| type | 'info' | 'warn' | 'success' | 'error' | 'default' | default |
| type | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
Chip Slots
| avatar | <Chip.Avatar slot="avatar" /> |
| label | <Chip.Label slot="label" /> |
| close | <Chip.Close slot="close" /> |
| default | |
Chip.Avatar Props
| src | string | |
| alt | string | user-avatar |
| placeholder | boolean | true |
Chip.Avatar Slots
| placeholder | <Avatar.Placeholder slot="placeholder" /> |
Chip.Avatar.Placeholder Slots
Chip Class Identifiers
| stwui-chip-avatar |
| stwui-chip-avatar-wrapper |
| stwui-chip |
| stwui-chip-close |
| stwui-chip-label |
| stwui-chip-icon-wrapper |
| stwui-chip-placeholder |
