Message

A component that displays messages with smooth animations and visibility control.

import { Message, T } from '@kaynora/ui'

export default function () {
  return (
    <Message>
      <T>This field is required</T>
    </Message>
  )
}

The isVisible prop determines whether the message is expanded and visible.

import { Message, T, Button } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [hasMessage, setHasMessage] = useState(false)

  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '20px',
      width: '100%',
    }}>
      <Button onClick={() => setHasMessage(!hasMessage)} width='full'>
        <T>Toggle Message</T>
      </Button>

      <Message isVisible={hasMessage}>
        <T>Please enter a valid email address</T>
      </Message>
    </div>
  )
}

The color prop determines the color of the text, and if applicable, the border of the message.

import { Message, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      width: '100%',
      display: 'flex',
      flexFlow: 'column',
      gap: '10px',
    }}>
      <Message color='primary'>
        <T>Primary color</T>
      </Message>

      <Message color='dimmed'>
        <T>Dimmed color</T>
      </Message>

      <Message color='success'>
        <T>Success color</T>
      </Message>

      <Message color='error'>
        <T>Error color</T>
      </Message>
    </div>
  )
}

The surface prop determines the visual style of the message.

import { Message, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      width: '100%',
      display: 'flex',
      flexFlow: 'column',
      gap: '20px',
    }}>
      <Message surface='outline' color='error'>
        <T>Outline surface</T>
      </Message>

      <Message surface='text' color='error'>
        <T>Text surface</T>
      </Message>
    </div>
  )
}

<Message />

ReactElement | ReactElement[]

boolean

'primary' | 'dimmed' | 'success' | 'error'

'outline' | 'text'

{
  root: HTMLDivElementProps
}