Components
Usage
The Button component can trigger an action or navigate to a link. Import it from the @udixio/ui-react package and provide at least a label via the label prop.
import { Button } from "@udixio/ui-react"<Button>Button</Button>Variants
<div className="flex flex-wrap gap-3">
<Button variant="filled">Filled</Button>
<Button variant="elevated">Elevated</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>
</div>Toggle buttons
Make a button togglable by providing onToggle and controlling its state with activated.
function ToggleExample() {
const [activeStates, setActiveStates] = React.useState({
filled: false,
elevated: false,
tonal: false,
outlined: false,
text: false,
});
const handleToggle = (buttonType) => (newState) => {
setActiveStates((prev) => ({
...prev,
[buttonType]: newState,
}));
};
return (
<div className="flex flex-wrap gap-3">
<Button
label={activeStates.filled ? 'Active' : 'Inactive'}
variant="filled"
onToggle={handleToggle('filled')}
activated={activeStates.filled}
/>
<Button
label="Elevated"
variant="elevated"
onToggle={handleToggle('elevated')}
activated={activeStates.elevated}
/>
<Button
label="Filled Tonal"
variant="tonal"
onToggle={handleToggle('tonal')}
activated={activeStates.tonal}
/>
<Button
label="Outlined"
variant="outlined"
onToggle={handleToggle('outlined')}
activated={activeStates.outlined}
/>
</div>
);
}Note: When used as a toggle button, accessibility is handled via aria-pressed automatically.
Disabled state
Use the disabled prop to make the button inactive.
<div className="flex flex-wrap gap-3">
<Button label="Disabled" disabled />
<Button label="Disabled" variant="outlined" disabled />
</div>Sizes
<div className="flex flex-wrap items-end gap-3">
<Button label="XS" size="xSmall" />
<Button label="S" size="small" />
<Button label="M" size="medium" />
<Button label="L" size="large" />
<Button label="XL" size="xLarge" />
</div>Shapes
Control the button’s appearance via the shape prop.
<div className="flex flex-wrap gap-3">
<Button label="Rounded" shape="rounded" />
<Button label="Squared" shape="squared" />
</div>Icon
You can add an icon (FontAwesome) and choose its position.
Loading state
<Button label="Sending..." loading />Link or action
If the href prop is provided, the component renders an <a> link; otherwise it renders a <button>.
<div className="flex gap-3">
<Button label="Click me" onClick={() => console.log('clicked')} />
<Button label="Go to Udixio" href="https://udixio.dev" />
</div>