Badge.Status

View Source

Failed

Saved

Copy

Edit

render(() => {
  const [type, setType] = React.useState({})
  return (
    <StackView alignment="center" spacing={2}>
      <StackView axis="horizontal" spacing={1}>
        {[
          { title: 'Failed', status: 'error' },
          { title: 'Saved', status: 'success' },
        ].map((type) => (
          <Button
            key={type.title}
            title={type.title}
            onClick={() => setType(type)}
          />
        ))}
      </StackView>
      <Badge.Status
        size="xs"
        status={type.status}
        title={type.title}
        onClearRequest={() => setType({})}
      />
    </StackView>
  )
})

render(() => {
  const [type, setType] = React.useState({})
  return (
    <StackView alignment="center" spacing={2}>
      <StackView axis="horizontal" spacing={1}>
        {[
          { title: 'Failed', status: 'error' },
          { title: 'Saved', status: 'success' },
        ].map((type) => (
          <Button
            key={type.title}
            title={type.title}
            onClick={() => setType(type)}
          />
        ))}
      </StackView>
      <Badge.Status
        size="xs"
        status={type.status}
        title={type.title}
        onClearRequest={() => setType({})}
      />
    </StackView>
  )
})

Props

titlestring

Title of badge

sizestring

The size of the badge

status'error' | 'success'

The status of the badge, if nothing passed, nothing will be rendered.

lightboolean

When true, Sets a light background to use against darker backgrounds.

onClearRequest() => void

Called when the status should be set hidden

Props

PreviousBadge NextButton