Alert Dialog size prop
The AlertDialogContent component accepts a size prop with type 'default' | 'sm' and default value 'default'. Use size='sm' to make the alert dialog smaller.
component props & api
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Alert component required props
The Alert component has no required props. The variant prop is optional with a default value of 'default'.
Alert component variant prop
The Alert component accepts a variant prop with type 'default' | 'destructive'. The default value is 'default'. Use variant="destructive" to create a destructive alert.
AlertTitle component props
The AlertTitle component accepts an optional className prop of type string with no default value.
AlertDescription component props
The AlertDescription component accepts an optional className prop of type string with no default value.
AlertAction component props and positioning
The AlertAction component accepts an optional className prop of type string with no default value. It displays an action element (like a button) positioned absolutely in the top-right corner of the alert.
ButtonGroup size control
Control the size of buttons in a ButtonGroup using the `size` prop on individual Button components.
ButtonGroupText render prop
The ButtonGroupText component has a `render` prop that accepts `React.ReactElement` to render a custom component as the text, such as a label.
ButtonGroup API reference - props table
ButtonGroup component props: | Prop | Type | Default | | --- | --- | --- | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
ButtonGroupSeparator API reference - props table
ButtonGroupSeparator component props: | Prop | Type | Default | | --- | --- | --- | | `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |
ButtonGroupText API reference - props table
ButtonGroupText component props: | Prop | Type | Default | | --- | --- | --- | | `render` | `React.ReactElement` | (required) |
ButtonGroupSeparator orientation prop
The ButtonGroupSeparator component has an `orientation` prop that accepts `"horizontal"` or `"vertical"`, with a default of `"vertical"`.
ButtonGroup orientation prop
The `orientation` prop changes the button group layout and accepts `"horizontal"` or `"vertical"`, with a default of `"horizontal"`.
Button size options
The Button component supports the following sizes: default, xs, sm, lg, icon, icon-xs, icon-sm, and icon-lg.
Button component API reference
The Button component has the following props: variant (type: "default" | "outline" | "ghost" | "destructive" | "secondary" | "link", default: "default") and size (type: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg", default: "default").
Button variant options
The Button component supports the following variants: default, outline, ghost, destructive, secondary, and link.
Button size prop
Use the size prop to change the size of the button.
Checkbox invalid state
To show invalid styles on a checkbox, set aria-invalid on the checkbox component and data-invalid on the field wrapper.
Checkbox controlled state
To control checkbox state, use the checked prop and onCheckedChange handler. Use defaultChecked for uncontrolled checkboxes where you don't manage the state.
Checkbox disabled state
Use the disabled prop on the checkbox component and add the data-disabled attribute to the Field component to show disabled styles.