Chips

The Chips component represents small interactive elements for filtering, selection, or actions.

Anatomy

Import all parts and piece them together.


import { Chips } from '@xsolla-zk/react'
 
export default () => (
  <Chips>
    <Chips.Icon />
    <Chips.Text />
    <Chips.Action />
  </Chips>
)

Examples

Basic example


import { Chips } from '@xsolla-zk/react'
 
function App() {
  return (
    <Chips>
      <Chips.Text>Tag</Chips.Text>
    </Chips>
  )
}

With icon


import { Chips } from '@xsolla-zk/react'
import { Star } from '@xsolla-zk/icons'
 
function App() {
  return (
    <Chips>
      <Chips.Icon>
        <Star />
      </Chips.Icon>
      <Chips.Text>Favorite</Chips.Text>
    </Chips>
  )
}

Interactive chips


import { Chips } from '@xsolla-zk/react'
import { useState } from 'react'
 
function App() {
  const [selected, setSelected] = useState(false)
 
  return (
    <Chips
      pressable
      selected={selected}
      onPress={() => setSelected(!selected)}
    >
      <Chips.Text>Selectable</Chips.Text>
    </Chips>
  )
}

With remove button


import { Chips } from '@xsolla-zk/react'
import { Cross } from '@xsolla-zk/icons'
 
function App() {
  return (
    <Chips>
      <Chips.Text>Removable tag</Chips.Text>
      <Chips.Action onPress={() => console.log('Remove')}>
        <Cross />
      </Chips.Action>
    </Chips>
  )
}

All Sizes


<Chips size="$200">
  <Chips.Text>Small</Chips.Text>
</Chips>
 
<Chips size="$300">
  <Chips.Text>Medium</Chips.Text>
</Chips>
 
<Chips size="$500">
  <Chips.Text>Large</Chips.Text>
</Chips>

All Variants

Default


<Chips variant="default">
  <Chips.Text>Default</Chips.Text>
</Chips>

Outlined


<Chips variant="outlined">
  <Chips.Text>Outlined</Chips.Text>
</Chips>

API

Chips Props

Chips extends Tamagui stack views inheriting all standard props, plus:

Prop	Type	Default	Description
`variant`	`'default' \| 'outlined'`	`'default'`	Display variant
`size`	`ChipsSizes`	`'$300'`	Chip size
`selected`	`boolean`	`false`	Selection state
`pressable`	`boolean`	`false`	Makes chip interactive
`onPress`	`() => void`	-	Press handler

Chips.Text Props

Component for displaying chip text.

Chips.Icon Props

Component for displaying chip icon.

Chips.Action Props

Component for interactive actions (e.g., removal).

Accessibility

Supports keyboard navigation
Works correctly with screen readers
Supports ARIA attributes for states