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

button

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

Button base element

The Button component is based on the button element and supports common margin props.

Button size prop values

The Button component accepts a size prop with values 1, 2, and 3 to control the button size.

Button variant prop values

The Button component accepts a variant prop with values: classic, solid, soft, surface, and outline. There is also a ghost variant.

Button color prop

The Button component accepts a color prop to assign a specific color, such as indigo, cyan, orange, or crimson.

Button highContrast prop

The Button component accepts a highContrast prop to increase color contrast with the background.

Button radius prop values

The Button component accepts a radius prop with values including none, large, and full to assign a specific radius value.

Button icon nesting

Icons can be nested directly inside the button element. An appropriate gap is provided automatically between the icon and button text.

Button loading prop

The Button component accepts a loading prop to display a loading spinner in place of button content, preserving the original size of the button in its normal state. The button will be disabled while loading.

Button with icon and spinner loading pattern

For a more sophisticated loading design with an icon inside the button, use the button's disabled state and wrap the icon in a standalone Spinner component with the loading prop set to true.

Button loading prop with Spinner

Buttons have their own loading prop that automatically composes a Spinner. This can be used by setting loading={true} on a Button component.

Spinner with icon inside button pattern

To achieve a sophisticated design with an icon and loading state inside a button, use the button's disabled state and wrap the icon in a standalone Spinner component. Example: ```jsx <Button disabled> <Spinner loading> <BookmarkIcon /> </Spinner> Bookmark </Button> ```

Radix Themes 3.0.0 Button and IconButton loading prop

Radix Themes 3.0.0 added a new `loading` prop to Button and IconButton components.

Give your agent this brain