new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

callout

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Callout component structure

Callout consists of three parts: Root (groups Icon and Text), Icon (provides width and height for the icon), and Text (renders the callout text). Root is based on the div element and supports common margin props. Icon is based on the div element. Text is based on the p element.

Callout size prop values

The Callout.Root component accepts a size prop with values 1, 2, and 3 to control the size of the callout.

Callout variant prop values

The Callout.Root component accepts a variant prop with values soft, surface, and outline to control the visual style.

Callout color prop usage

The Callout.Root component accepts a color prop to assign a specific color from the theme's color palette. Common color values include blue, green, and red.

Callout highContrast prop

The Callout.Root component accepts a highContrast boolean prop to add additional contrast to the callout.

Callout as alert with WAI-ARIA role

Add the native WAI-ARIA alert role to Callout.Root by passing role="alert" when the user's immediate attention is required, such as when an error message appears. The screen reader will be interrupted and announce the new content immediately.

Callout basic example

This example shows a basic callout with an icon and text: <Callout.Root> <Callout.Icon> <InfoCircledIcon /> </Callout.Icon> <Callout.Text> You will need admin privileges to install and access this application. </Callout.Text> </Callout.Root>

Callout with alert role example

This example shows a callout used as an alert with the role="alert" attribute: <Callout.Root color="red" role="alert"> <Callout.Icon> <ExclamationTriangleIcon /> </Callout.Icon> <Callout.Text> Access denied. Please contact the network administrator to view this page. </Callout.Text> </Callout.Root>

Give your agent this brain