Callout Component

The Callout component is part of the @teenageinterface Angular component library. It provides a styled container for displaying important messages with customizable icons, titles, and types.

Installation

Ensure that you have installed the @teenageinterface/callout library in your Angular project. If not, you can add it using:

npm install @teenageinterface/callout

Usage

Import the Callout component module into your Angular application:

import { CommonModule } from '@angular/common';
import { CalloutComponent } from '@teenageinterface/callout';

@Component({
  selector: 'pages-callout',
  standalone: true,
  imports: [CalloutComponent],
  template: `
    <tiCallout
      [id]="'callout-id'"
      [title]="'Success Message'"
      [icon]="'check_circled'"
      [type]="'success'"
    >
      Your operation was successful!
    </tiCallout>
  `,
})
export default class CalloutPage {}

Example

<tiCallout
  [title]="'Informative Message'"
  [icon]="'info-circle'"
  [type]="'informative'"
>
  This is an informative message.
</tiCallout>

<tiCallout
  [title]="'Warning Message'"
  [icon]="'warning'"
  [type]="'warn'"
>
  Be careful about proceeding further.
</tiCallout>

Properties

| Property | Type | Default | Description | |------------|------------------------------------------------------------------|--------------|------------------------------------------------------------------| | id | string \| null | null | Unique identifier for the callout. | | title | string | "" | Title of the callout. | | icon | string | "" | Name of the icon to display in the callout. | | type | 'default' \| 'success' \| 'informative' \| 'warn' \| 'destructive' | 'default' | Determines the style of the callout. |

Types

type

• default: Neutral style for general use.
• success: Indicates successful outcomes or statuses.
• informative: Used for informational messages.
• warn: Alerts users to warnings or non-critical issues.
• destructive: Highlights destructive actions or critical errors.

Styling

Each type applies additional color schemes:

• default: Neutral background and border with contrasting text.
• success: Green background and border with bold, positive text.
• informative: Light blue background and border with clear text.
• warn: Yellow background and border with attention-grabbing text.
• destructive: Red background and border for critical messages.

Accessibility

• Provide meaningful title and icon properties for better understanding.
• Use type properties appropriately to ensure clear communication of the callout's purpose.

Documentation

For more information, visit the official documentation.

Repository

The source code is available on GitHub.

License

This project is licensed under the MIT License.