SONAX Application UI

Badge

Demos

Default

import { Badge, Stack, spacing } from 'sxa-ui'

function Demo() {
  return (
    <Stack gap={spacing.m}>
        <Badge label='Badge' />
    </Stack>
  )
}

export default Demo

States

import { Badge, Stack, spacing } from 'sxa-ui'

function Demo() {
  return (
    <Stack gap={spacing.m}>
        <Badge state={Badge.states.error} label='Error' />
        <Badge state={Badge.states.success} label='Success' />
        <Badge state={Badge.states.info} label='Info' />
        <Badge state={Badge.states.disabled} label='Disabled' />
    </Stack>
  )
}

export default Demo