Notification

import { Notification, Text, Stack, Button, ButtonLink, spacing } from 'sxa-ui'
import {
  RiInformationLine,
  RiCheckLine,
  RiCloseLine,
} from '@remixicon/react'



function Demo() {
  return (
    <Notification
      state={Notification.states.info}
      title='Title'
      icon={RiInformationLine}
      closable
      actions={
        <Stack gap={spacing.xxs}>
          <Button label='Label' iconEnd={RiCheckLine} />
          <ButtonLink label='Label' iconEnd={RiCloseLine} variant={Button.variants.ghost} />
        </Stack>
      }
    >
      <Text>Description</Text>
    </Notification>
  )
}

export default Demo

import { Notification, Text, Stack, spacing, Button, ButtonLink } from 'sxa-ui'
import {
  RiInformationLine,
  RiCheckboxCircleLine,
  RiAlertLine,
  RiCheckLine,
  RiCloseLine,
} from '@remixicon/react'



function Demo() {
  return (
    <Stack direction={Stack.directions.vertical} gap={spacing.s}>
      <Notification
        state={Notification.states.info}
        title='Title'
        icon={RiInformationLine}
        closable
        actions={
          <Stack gap={spacing.xxs}>
            <Button label='Label' iconEnd={RiCheckLine} />
            <ButtonLink label='Label' iconEnd={RiCloseLine} variant={Button.variants.ghost} />
          </Stack>
        }
      >
        <Text>Description</Text>
      </Notification>
      <Notification
        state={Notification.states.success}
        title='Title'
        closable
        icon={RiCheckboxCircleLine}
        actions={
          <Stack gap={spacing.xxs}>
            <Button label='Label' iconEnd={RiCheckLine} />
            <ButtonLink label='Label' iconEnd={RiCloseLine} variant={Button.variants.ghost} />
          </Stack>
        }
      >
        <Text>Description</Text>
      </Notification>
      <Notification
        state={Notification.states.danger}
        title='Title'
        icon={RiAlertLine}
        actions={
          <Stack gap={spacing.xxs}>
            <Button label='Label' iconEnd={RiCheckLine} />
            <ButtonLink label='Label' iconEnd={RiCloseLine} variant={Button.variants.ghost} />
          </Stack>
        }
      >
        <Text>Description</Text>
      </Notification>
    </Stack>
  )
}

export default Demo

import { Notification, Text, Stack, spacing, Button, ButtonLink } from 'sxa-ui'
import {
  RiInformationLine,
  RiCheckboxCircleLine,
  RiAlertLine,
  RiCheckLine,
  RiCloseLine,
} from '@remixicon/react'



function Demo() {
  return (
    <Stack direction={Stack.directions.vertical} gap={spacing.s}>
      <Notification
        tiny
        state={Notification.states.info}
        closable
        title='Title'
        icon={RiInformationLine}
      />
      <Notification
        tiny
        closable
        state={Notification.states.success}
        title='Title'
        icon={RiCheckboxCircleLine}
      />
      <Notification
        tiny
        state={Notification.states.danger}
        closable
        title='Title'
        icon={RiAlertLine}
      />
    </Stack>
  )
}

export default Demo