Alert

Documentation for the <Alert /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn

yarn add @exponentialeducation/betomic

Basic Example#

An Alert notify users of important information.

{/* ... */}

import { Alert } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Alert>
        Default alert example
      </Alert>

      {/* ... */}
    </main>
  )
}

Variants#

You can change the default style, passing a valid type prop:

{/* ... */}

import { Alert } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Alert type="success">
        Success are to notify...
      </Alert>

      {/* ... */}
    </main>
  )
}

Closable#

{/* ... */}

import { Alert } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Alert type="success" closable>
        Success are to notify...
      </Alert>

      {/* ... */}
    </main>
  )
}

Props#