Tungsten UI 💡

Tungsten UI 💡

Callout

A flexible callout component for highlighting important information, announcements, warnings, and other contextual messages with various styles and interactive features.

Information

This is a basic callout message to highlight important information.
<c-callout heading="Information" text="This is a basic callout message to highlight important information."></c-callout>

Component API

Property Type Default Description
variant string secondary Callout style variant: secondary, success, warning, danger
icon string - Lucide icon name to display in the header
heading string - Callout heading text
text string - Quick text content for simple callouts
color string - Custom color variant: blue, green, purple
inline string false Display actions inline (use "true")
dismissible string false Show close button (use "true")
class string - Additional CSS classes

Available Slots

Slot Description
slot Main content area for rich content
icon_slot Custom icon content instead of Lucide icon
actions Action buttons or links
controls Additional UI controls (toggles, etc.)

Examples

Callout Variants

Different variants provide semantic meaning and visual hierarchy for various types of messages.

Information

This is a general information callout.

Success

Operation completed successfully!

Warning

Please review this important information.

Error

Something went wrong and requires attention.
<c-callout variant="secondary" icon="info" heading="Information" text="This is a general information callout."></c-callout>
<c-callout variant="success" icon="check-circle" heading="Success" text="Operation completed successfully!"></c-callout>
<c-callout variant="warning" icon="alert-triangle" heading="Warning" text="Please review this important information."></c-callout>
<c-callout variant="danger" icon="alert-circle" heading="Error" text="Something went wrong and requires attention."></c-callout>

Custom Colors

Use custom color variants for branded or specific design needs.

Feature Spotlight

Check out this amazing new feature we've added!

Eco-Friendly

This action helps reduce environmental impact.

Premium Feature

Upgrade to access this exclusive functionality.
<c-callout color="blue" icon="star" heading="Feature Spotlight" text="Check out this amazing new feature we've added!"></c-callout>
<c-callout color="green" icon="leaf" heading="Eco-Friendly" text="This action helps reduce environmental impact."></c-callout>
<c-callout color="purple" icon="crown" heading="Premium Feature" text="Upgrade to access this exclusive functionality."></c-callout>

Rich Content

Use the default slot for complex content including formatted text, lists, and other HTML elements.

Maintenance Window

Scheduled maintenance will occur on Sunday, March 15th from 2:00 AM to 6:00 AM EST.

During this time, the following services will be affected:

  • User authentication
  • File uploads
  • Email notifications

We apologize for any inconvenience this may cause.

<c-callout variant="warning" icon="clock" heading="Maintenance Window">
    <p>Scheduled maintenance will occur on <strong>Sunday, March 15th</strong>...</p>
    <ul class="list-disc list-inside">
        <li>User authentication</li>
        <li>File uploads</li>
        <li>Email notifications</li>
    </ul>
</c-callout>

Callouts with Actions

Add action buttons to make callouts interactive and actionable.

Welcome Bonus!

You've earned 100 bonus points for joining our community!

Subscription Expiring

Your premium subscription expires in 3 days. 
<c-callout variant="success" icon="gift" heading="Welcome Bonus!">
    <c-slot name="actions">
        <c-button variant="primary" size="sm">Claim Reward</c-button>
        <c-button variant="ghost" size="sm">Learn More</c-button>
    </c-slot>
    You've earned 100 bonus points for joining our community!
</c-callout>

Dismissible Callouts

Add a close button to allow users to dismiss callouts they no longer need to see.

Pro Tip

You can customize your dashboard layout by dragging and dropping widgets.

Security Notice

We've updated our privacy policy. Please review the changes.
<c-callout variant="secondary" icon="lightbulb" heading="Pro Tip" dismissible="true" text="You can customize your dashboard layout..."></c-callout>
<c-callout variant="warning" icon="shield-alert" heading="Security Notice" dismissible="true" text="We've updated our privacy policy..."></c-callout>

Custom Icon Content

Use the icon slot for custom icon content when Lucide icons aren't sufficient.

Payment Successful

Your payment of $49.99 has been processed successfully. 
<c-callout variant="success" heading="Payment Successful">
    <c-slot name="icon_slot">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4z..." clip-rule="evenodd" />
        </svg>
    </c-slot>
    Your payment of $49.99 has been processed successfully.
</c-callout>

Usage Guidelines

Semantic Usage

Use appropriate variants: success for positive outcomes, warning for caution, danger for errors, and secondary for general information.

Clear Communication

Keep headings concise and use clear, actionable language. Provide context and next steps when possible.

Don't Overuse

Callouts are attention-grabbing by design. Use them sparingly to maintain their effectiveness and avoid overwhelming users.