import {Chip} from "@qinetik/anique/chip";
import {Row} from "@qinetik/anique";
export default function BasicChipExample() {
return (
<Row gap={"1em"}>
<Chip>My First Chip</Chip>
<Chip>My Second Chip</Chip>
<Chip>My Third Chip</Chip>
<Chip>My Fourth Chip</Chip>
<Chip>My Fifth Chip</Chip>
</Row>
)
}
Chip
My First Chip
My Second Chip
My Third Chip
My Fourth Chip
My Fifth Chip
Color Variations
Bg Chip
Primary Chip
Accent Chip
import {Row} from "@qinetik/anique";
import {Chip} from "@qinetik/anique/chip";
export default function ChipColorVariationsExample() {
return (
<Row gap={"1em"}>
<Chip variation={"bg"}>Bg Chip</Chip>
<Chip variation={"primary"}>Primary Chip</Chip>
<Chip variation={"accent"}>Accent Chip</Chip>
</Row>
)
}
Chip with Icons
My First Chip
My Last Chip
My Last Chip
import {IconButton, Row} from "@qinetik/anique";
import {Chip} from "@qinetik/anique/chip";
import {ChevronUp} from "@qinetik/anique-icons";
export default function ChipWithIconsExample() {
return (
<Row gap={"1em"}>
<Chip>
<IconButton size={-0.5}>
<ChevronUp/>
</IconButton>
<span>My First Chip</span>
</Chip>
<Chip>
<span>My Last Chip</span>
<IconButton size={-0.5} style={{transform: "rotate(180deg)"}}>
<ChevronUp/>
</IconButton>
</Chip>
<Chip>
<IconButton size={-0.5}>
<ChevronUp/>
</IconButton>
<span>My Last Chip</span>
<IconButton size={-0.5} style={{transform: "rotate(180deg)"}}>
<ChevronUp/>
</IconButton>
</Chip>
</Row>
)
}
Clickable Chip
My First Chip
My Second Chip
My Third Chip
My Last Chip
import {ClickableChip} from "@qinetik/anique/chip";
import {IconButton, Row} from "@qinetik/anique";
import {ChevronUp} from "@qinetik/anique-icons";
export default function ClickableChipExample() {
return (
<Row gap={"1em"}>
<ClickableChip>
<span>My First Chip</span>
</ClickableChip>
<ClickableChip variation={"primary"}>
<span>My Second Chip</span>
</ClickableChip>
<ClickableChip variation={"accent"}>
<span>My Third Chip</span>
</ClickableChip>
<ClickableChip>
<IconButton size={-0.5}>
<ChevronUp/>
</IconButton>
<span>My Last Chip</span>
<IconButton size={-0.5} style={{transform: "rotate(180deg)"}}>
<ChevronUp/>
</IconButton>
</ClickableChip>
</Row>
)
}